使用 Next.js 快速构建个人博客的经验分享-JavaScript中文网-JavaScript教程资源分享门户

如果你是一名前端开发者，想要搭建一个属于自己的个人博客，那么 Next.js 可能是一个不错的选择。Next.js 是一个基于 React 的服务端渲染框架，它可以帮助我们快速构建一个高性能的网站，而且上手也比较容易。

Step1 安装和创建项目

首先我们需要安装 Node.js 和 npm，然后使用 npm 安装 Next.js：

npm install next react react-dom

接下来在命令行中执行如下命令，创建一个新的 Next.js 项目：

npx create-next-app my-blog

这个命令会创建一个名为 “my-blog” 的新项目，并且会自动生成一些初始的文件和目录。

Step2 创建页面

在 Next.js 中，每一个页面都是一个 React 组件。我们可以通过在 pages 目录下创建一个新文件来创建一个页面。例如，我们可以创建一个名为 index.js 的页面，来作为整个网站的首页。

// javascriptcn.com 代码示例
import React from 'react'

const HomePage = () => {
  return (
    <div>
      <h1>Welcome to my blog!</h1>
      <p>Here you can find my latest articles on web development.</p>
    </div>
  )
}

export default HomePage

这样我们就可以在浏览器中访问这个页面了，例如： http://localhost:3000/

Step3 创建动态路由

如果我们想要为我们的博客添加一些动态路由，例如让用户能够访问每篇文章的详细页面，怎么办呢？这时候 Next.js 就发挥了它的优势。我们可以在 pages 目录下创建一个名为 blog/[slug].js 的页面，其中 slug 是一个博客文章的唯一标识符。

// javascriptcn.com 代码示例
import React from 'react'
import { useRouter } from 'next/router'

const BlogPostPage = () => {
  const router = useRouter()
  const { slug } = router.query

  return (
    <div>
      <h1>{slug}</h1>
      <p>Here goes the content of the blog post!</p>
    </div>
  )
}

export default BlogPostPage

现在访问 /blog/my-post-title 就会自动跳转到我们创建的这个页面，并且 slug 的值就是 my-post-title。

Step4 添加样式

到目前为止，我们的博客页面还是有些简陋。为了给它添加一些样式，我们可以使用 CSS 或者 CSS 预处理器，例如 Sass 或者 Less。我们可以在 styles 目录下创建一个全局的样式文件 global.css。

// javascriptcn.com 代码示例
body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 2rem;
}

p {
  font-size: 1.2rem;
  line-height: 1.5;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

然后在 _app.js 文件中引用这个样式文件。

import '../styles/global.css'

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

export default MyApp

Step5 添加数据源

如果我们想要在博客页面上展示一些真实的博客文章，那么我们需要去获取数据，并将它展示在页面上。下面是一个针对 Markdown 文件的数据源，它可以让我们在页面上展示一个目录，并且点击其中某一篇文章时，能够自动跳转到对应的文章页面。

// javascriptcn.com 代码示例
const { readdirSync, readFileSync } = require('fs')
const { join } = require('path')
const matter = require('gray-matter')

const postsDirectory = join(process.cwd(), '_posts')

export function getPostSlugs() {
  return readdirSync(postsDirectory)
}

export function getPostBySlug(slug) {
  const fullPath = join(postsDirectory, `${slug}.md`)
  const fileContents = readFileSync(fullPath, 'utf8')
  const { data, content } = matter(fileContents)

  return {
    slug,
    frontmatter: data,
    content
  }
}

export function getAllPosts() {
  const slugs = getPostSlugs()
  const posts = slugs
    .map((slug) => getPostBySlug(slug))
    .sort((a, b) => (a.frontmatter.date < b.frontmatter.date ? 1 : -1))

  return posts
}

Step6 使用 Markdown 渲染器

要在页面上展示 Markdown 文件的内容，需要先将其转换成 HTML，并使用 HTML 标签来展示结果。我们可以使用一个叫做 react-markdown 的库来完成这个任务。

// javascriptcn.com 代码示例
import React from 'react'
import { getAllPosts } from '../../lib/posts'
import Link from 'next/link'
import ReactMarkdown from 'react-markdown'

const PostsPage = ({ posts }) => {
  return (
    <div>
      <h1>My Latest Articles</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/posts/${post.slug}`}>
              <a>
                <h2>{post.frontmatter.title}</h2>
                <p>{post.frontmatter.description}</p>
              </a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

export async function getStaticProps() {
  const posts = getAllPosts()
  return {
    props: { posts }
  }
}

export default PostsPage

我们可以在 _app.js 文件中引用一个全局的 Markdown 样式

import 'github-markdown-css'

这个样式文件会使得所有 Markdown 渲染出来的 HTML 都具有 GitHub 风格的样式。

总结

使用 Next.js 来构建一个个人博客确实是一件很不错的选择，它除了可以快速构建高性能的网站之外，还提供了很多工具和库来简化我们的开发流程。如果你也想要创建一个自己的博客，那么不妨试试 Next.js 吧！

示例代码： https://codesandbox.io/s/nextjs-blog-example-36uzc

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654106107d4982a6ebaa7328