Next.js 已經成為 React 應用程式最重要的架構之一。它可以幫助開發人員在沒有模闆的情況下建構更好的伺服器端渲染 React 應用程式。

Next.js 之是以能成為目前最好的 React 架構之一，與其很多特性離不開，比如打包建構、路由預取、TypeScript、SEO 等。

對于那些想要擁有一個簡單但功能強大的部落格的人來說，使用 Next.js 建立部落格是當今的最佳選擇。

SEO（搜尋引擎優化）是改進應用程式在搜尋引擎排名的過程。對于任何想要在搜尋引擎上獲得更好排名并帶來更多流量的部落格來說，這都是非常重要的。

我們将在本文中使用 Next.js 來建構部落格。我們将介紹 SSG（靜态站點生成）的工作原理，并完成 SEO 友好的部落格。

入門

使用官方推薦的Create Next App建立項目

npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript
複制代碼

為什麼要使用Create Next App

互動式體驗：不帶任何參數運作npx create-next-app@latest，将會開啟互動模式，引導建立項目
零依賴：Create Next App沒有依賴，毫秒級建立項目
離線支援：Create Next App偵測網絡狀态，無網狀态将使用本地依賴緩存
支援模闆：通過加入--example參數，可以拉取官方倉庫任何模闆
內建測試：內建測試功能

建立完成後項目目錄構造如下：

.
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── pages
├── pnpm-lock.yaml
├── public
├── styles
└── tsconfig.json
複制代碼

安裝依賴

pnpm install globby gray-matter dayjs @chakra-ui/react prismjs @emotion/react @emotion/styled framer-motion next-mdx-remote remark-gfm
複制代碼

建立文章

根目錄新增_posts目錄，在_posts目錄下建立兩個mdx檔案(_posts/js/helloWorld.mdx,_posts/demo.mdx)，為什麼是mdx檔案呢？mdx支援渲染元件，支援引入導出元件，詳細文檔參考MDX

建立公共函數目錄

根目錄新增utils目錄，在utils目錄下建立getAllPosts.js并寫入如下函數

import fs from 'fs'
import {globby} from 'globby'
import matter from 'gray-matter'
const dayjs = require('dayjs')
const relativeTime = require('dayjs/plugin/relativeTime')

dayjs.extend(relativeTime)

//擷取所有文章
const GetAllPosts = async () => {
  const posts = await globby(['_posts'])
  return posts
    .reduce((prev, next) => {
      const fileContents = fs.readFileSync(next, 'utf8')
      const {data, content} = matter(fileContents)
      const postData = {
        ...data,
        group: dayjs(data.date).format('MMM/YYYY'),
        date: dayjs(data.date).format('MMM DD, YYYY'),
        fromNow: dayjs(data.date).fromNow(),
        modified: dayjs(data.modified).format('MMM DD, YYYY'),
        content,
        slug: next.replace(/^_posts//, '').replace(/.mdx$/, '')
      }
      !data.draft && prev.push(postData)
      return prev
    }, [])
    .sort((a, b) => dayjs(b.date) - dayjs(a.date))
}

// 根據slug導出文章
const GetPostBySlug = (slug) => {
  // eslint-disable-next-line no-undef
  return new Promise((resolve, reject) => {
    GetAllPosts()
      .then((posts) => {
        const post = posts.find((post) =>
          post.slug.includes(`${slug.join('/')}`)
        )
        resolve(post)
      })
      .catch(() => {
        reject({})
      })
  })
}

export {GetAllPosts, GetPostBySlug}
複制代碼

建立元件

建立PostPage.tsx元件，内容如下：

import React, {useEffect} from 'react'
import Prism from 'prismjs'
import {Box} from '@chakra-ui/react'

// 以下按需引入
require('prismjs/components/prism-go')
require('prismjs/components/prism-python')
require('prismjs/components/prism-javascript')
require('prismjs/components/prism-css')
require('prismjs/components/prism-bash')
require('prismjs/components/prism-swift')
require('prismjs/components/prism-tsx')
require('prismjs/components/prism-jsx')
require('prismjs/components/prism-typescript')
require('prismjs/components/prism-sql')
require('prismjs/themes/prism-okaidia.min.css')

const PostPage = ({children}) => {
  useEffect(() => {
    const highlight = async () => {
      await Prism.highlightAll()
    }
    highlight().then(() => {})
  }, [children])
  return (
    <Box position="relative" w="2/3" fontSize="text.sm">
      {children}
    </Box>
  )
}
export default PostPage
複制代碼

建立pages/index.tsx

import NextLink from 'next/link'
import {Fragment} from 'react'
import {
  List,
  LinkOverlay,
  ListItem,
  Container,
  Heading,
  Image
} from '@chakra-ui/react'

const IndexPage = ({groupByMonthPosts}) => {
  return (
    <Container>
      {Object.keys(groupByMonthPosts).map((group) => {
        return (
          <Fragment key={group}>
            <Heading as="h3" mt={12} mb={4}>
              {group}
            </Heading>
            <List spacing={3}>
              {groupByMonthPosts[group].map((post) => {
                return (
                  <ListItem
                    position="relative"
                    display="flex"
                    gap={2}
                    alignItems="center"
                    key={post.title}
                  >
                    <NextLink
                      legacyBehavior
                      href={`/${post.slug}`}
                      passHref
                    >
                      <LinkOverlay>{post.title}</LinkOverlay>
                    </NextLink>
                    {post.tags.map((tag) => {
                      return (
                        <Image
                          key={tag}
                          boxSize={4}
                          objectFit="cover"
                          alt={tag}
                          src={`https://pics-rust.vercel.app/uPic/icons/${tag}.svg`}
                        />
                      )
                    })}
                  </ListItem>
                )
              })}
            </List>
          </Fragment>
        )
      })}
    </Container>
  )
}

export default IndexPage

export async function getStaticProps() {
  const {GetAllPosts} = await import('utils/getAllPosts')
  const posts = await GetAllPosts()
  const groupByMonthPosts = posts.reduce((prev, next) => {
    if (Array.isArray(prev[next.group])) {
      prev[next.group].push(next)
    } else {
      prev[next.group] = []
      prev[next.group].push(next)
    }
    return prev
  }, {})
  return {
    props: {
      groupByMonthPosts
    }
  }
}
複制代碼

建立pages/[...slug].tsx

import {MDXRemote} from 'next-mdx-remote'
import {serialize} from 'next-mdx-remote/serialize'
import dynamic from 'next/dynamic'
import ErrorPage from 'next/error'
import NextLink from 'next/link'
import {useRouter} from 'next/router'
import React from 'react'
import remarkGfm from 'remark-gfm'
import components from 'utils/components'
import {
  Container,
  Box,
  Heading,
  Text,
  Link,
  Image,
  Center
} from '@chakra-ui/react'

const PostPage = dynamic(() => import('components/PostPage'))

const Post = ({title, description, date, originalUrl, mdxSource, cover}) => {
  const router = useRouter()
  if (!router.isFallback && !mdxSource) {
    return <ErrorPage statusCode={404} />
  }
  return (
    <Container
      mt={20}
      maxW={{
        sm: 'container.sm',
        md: 'container.md',
        lg: 'container.2xl',
        xl: 'container.xl'
      }}
      className="post"
    >
      <NextSeo
        title={title}
        description={description}
        openGraph={{title, description}}
      />
      <Box as="hgroup">
        <Text textAlign="center" color="gray.500" fontSize="xs" as="p">
          Published {date}
        </Text>
        <Heading textAlign="center" as="h1" mt={4} mb={2}>
          {title}
        </Heading>
        {originalUrl && (
          <Center color="gray.500" fontSize="sm" mb={8}>
            本文翻譯自：
            <NextLink legacyBehavior href={originalUrl} passHref>
              <Link>{originalUrl}</Link>
            </NextLink>
          </Center>
        )}
      </Box>
      <Image
        boxSize="100%"
        src={
          cover ??
          'https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/NhSU3O.jpg'
        }
        alt={title}
      />

      <PostPage>
        <MDXRemote {...mdxSource} components={components} />
      </PostPage>
    </Container>
  )
}

export const getStaticPaths = async () => {
  const {GetAllPosts} = await import('utils/getAllPosts')
  const allPosts = await GetAllPosts()
  const paths = allPosts.map((post) => ({
    params: {
      slug: post.slug.split('/')
    }
  }))

  return {
    paths,
    fallback: false
  }
}

export const getStaticProps = async ({params}) => {
  const {GetPostBySlug} = await import('utils/getAllPosts')
  const {content, ...data} = await GetPostBySlug(params.slug)
  const mdxSource = await serialize(content, {
    mdxOptions: {
      remarkPlugins: [[remarkGfm]],
      rehypePlugins: []
    },
    scope: data
  })
  return {
    props: {
      ...data,
      mdxSource
    }
  }
}

export default Post
複制代碼

至此，基本架構搭建完成，接下來調整樣式及元件的引入，以及 mdx 渲染修正。

調整樣式

可選

引入tailwind.css，執行pnpm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p

修改tailwind.config.js,如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}
複制代碼

修改全局樣式styles/globals.scss

@tailwind base;
@tailwind components;
@tailwind utilities;
複制代碼

必須

修改pages/_app.tsx，引入chakra-ui的配置

// pages/_app.js
import {ChakraProvider} from '@chakra-ui/react'

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

export default MyApp
複制代碼

到這裡，不出意外，你的界面應該是長這樣

點選連結，應該會報錯，未引入utils/components，這個是配置 mdx 内元素渲染的元件，參考MDX Components，mdx 提供預設的渲染元件，是以，這個是非必須的，不需要删除即可

個人比較喜歡 chakra-ui，是以将元件都轉成了 chakra-ui 提供的元件，配置如下：

import CanIUse from 'components/CanIUse'
import {Heading, Link, Box} from '@chakra-ui/react'
import {FiExternalLink} from 'react-icons/fi'

const components = {
  CanIUse,
  h2: (props) => (
    <Heading as="h2" mb={4}>
      {props.children}
    </Heading>
  ),
  h3: (props) => (
    <Heading as="h3" mb={4}>
      {props.children}
    </Heading>
  ),
  h4: (props) => (
    <Heading as="h4" mb={4}>
      {props.children}
    </Heading>
  ),
  h5: (props) => (
    <Heading as="h5" mb={4}>
      {props.children}
    </Heading>
  ),
  p: (props) => (
    <Box as="div" mb={4}>
      {props.children}
    </Box>
  ),
  div: (props) => <Box mb={4}>{props.children}</Box>,
  a: (props) => {
    return (
      <Link
        display="inline-flex"
        alignItems="center"
        href={props.href}
        gap={2}
        isExternal
      >
        {props.children}
        <FiExternalLink />
      </Link>
    )
  }
}

export default components
複制代碼

好了，到這裡基本完成了基于Next.js的部落格搭建。

部署到Vercel

Next.js部署到Vercel無需更改和配置，無縫銜接。

【Source Code】

也可以參考我的個人網站Manon.icu | Home

使用Next.js建立Blog

入門

安裝依賴

建立文章

建立公共函數目錄

建立元件

部署到Vercel

繼續閱讀

js建立對象

Next.js+React+Node系統實戰，搞定SSR伺服器渲染

使用NextAuth.js 給 Next.js應用添加鑒權與認證

使用 React 和 Next.js 建構部落格

Next.js 13.2 正式釋出

為什麼Next.js/Deno/Parcel都在用SWC！

Next.js 基礎入門總結前言正文結語參考

一款基于 livekit 和 Next.js 的匿名聊天室「anonymous-chat-room」

React Next.js styled-components 報錯: Warning: Prop `className` did not match. Server:...React + Next.js + StyledComponents解決方案

css寫法批量更改css-module模式，vscode 正則比對批量替換

使用ChatGPT和Next.js建構一個開源項目

Next.js 入門(2)

Next.js中使用Tailwind CSS前言一、初始化Next.js項目二、添加tailwind css配置總結

小白大挑戰：用 ChatGPT 和 Next.js 開發開源項目，吸引上萬使用者！

為你的Next.js靜态網站國際化（使用App Router）

#前端##react##css##nextui#NextUIVersion2.0是一個基于React的UI庫，旨在提供美