Next.js Starter Prismic Blog 项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00262/article/details/141851889

Next.js Starter Prismic Blog 项目教程

nextjs-starter-prismic-blogBlog project with Next.js & Prismic项目地址:https://gitcode.com/gh_mirrors/ne/nextjs-starter-prismic-blog

1. 项目的目录结构及介绍

nextjs-starter-prismic-blog/
├── components/
│   ├── Article.js
│   ├── Footer.js
│   ├── Header.js
│   ├── Layout.js
│   ├── Meta.js
│   └── SliceZone.js
├── pages/
│   ├── _app.js
│   ├── _document.js
│   ├── index.js
│   └── posts/[uid].js
├── public/
│   ├── favicon.ico
│   └── images/
├── slices/
│   ├── Image.js
│   ├── Quote.js
│   ├── Text.js
│   └── Video.js
├── styles/
│   ├── globals.css
│   └── Home.module.css
├── .env.example
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── prismic-configuration.js

目录结构介绍

components/: 包含项目的React组件，如文章、页眉、页脚等。
pages/: 包含Next.js页面的文件，如首页、文章详情页等。
public/: 包含公共资源，如favicon和图片。
slices/: 包含Prismic Slice的实现。
styles/: 包含全局和页面的CSS样式。
.env.example: 环境变量示例文件。
.gitignore: Git忽略文件。
next.config.js: Next.js配置文件。
package.json: 项目依赖和脚本配置。
README.md: 项目说明文档。
prismic-configuration.js: Prismic配置文件。

2. 项目的启动文件介绍

`pages/_app.js`

这是Next.js应用的入口文件，用于初始化页面。它包裹了整个应用，并可以用于全局样式和布局。

import '../styles/globals.css';
import { Layout } from '../components';

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

`pages/_document.js`

这个文件用于自定义整个文档的结构，如HTML和Body标签。

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

`pages/index.js`

这是应用的首页，用于展示文章列表。

import { Client } from '../utils/prismicHelpers';
import { Article } from '../components';

export default function Home({ posts }) {
  return (
    <div>
      {posts.map((post) => (
        <Article key={post.id} post={post} />
      ))}
    </div>
  );
}

export async function getStaticProps() {
  const posts = await Client().query('');
  return {
    props: { posts: posts.results },
  };
}

3. 项目的配置文件介绍

`next.config.js`

这个文件用于配置Next.js应用的行为，如重写URL、添加环境变量等。

module.exports = {
  reactStrictMode: true,
};

`prismic-configuration.js`

这个文件用于配置Prismic客户端，包括API的访问令牌和仓库名称。

import * as prismic from '@prismicio/client';

const endpoint = prismic.getEndpoint('your-repo-name');
const accessToken = process.env.PRISMIC_ACCESS_TOKEN;

export const Client = (req = null) => prismic.createClient(endpoint, { accessToken, req });