使用 Next.js 和 MongoDB 搭建博客教程-JavaScript中文网-JavaScript教程资源分享门户

随着互联网的发展，越来越多的人开始关注个人博客。博客不仅可以记录个人生活、工作经验和技术分享，还可以提高个人的知名度和技术水平。本教程将介绍如何使用 Next.js 和 MongoDB 搭建博客。

准备工作

在开始搭建博客之前，您需要准备以下工具和环境：

Node.js
MongoDB 数据库
文本编辑器

如果您还没有安装 Node.js 和 MongoDB 数据库，请先下载安装。

创建 Next.js 应用

首先，我们需要创建一个 Next.js 应用。打开终端并执行以下命令：

npx create-next-app my-blog

该命令将创建一个名为 my-blog 的 Next.js 应用，并安装所需的依赖项。

配置 MongoDB 数据库

接下来，我们需要配置 MongoDB 数据库。打开 MongoDB，创建一个名为 my-blog 的数据库，并创建一个名为 posts 的集合。

use my-blog
db.createCollection("posts")

创建博客文章页面

现在，我们已经准备好开始创建博客文章页面了。在 pages 目录下创建一个名为 posts 的文件夹，并在该文件夹下创建一个名为 [slug].js 的文件。该文件将用于显示单个博客文章。

// javascriptcn.com 代码示例
import { useRouter } from 'next/router'
import Link from 'next/link'
import { MongoClient } from 'mongodb'

export default function Post({ post }) {
  const router = useRouter()

  if (router.isFallback) {
    return <div>Loading...</div>
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
      <Link href="/">
        <a>Back to home</a>
      </Link>
    </div>
  )
}

export async function getStaticPaths() {
  const client = await MongoClient.connect(process.env.MONGODB_URI)
  const db = client.db()
  const postsCollection = db.collection('posts')

  const posts = await postsCollection.find({}, { projection: { slug: 1 } }).toArray()

  const paths = posts.map((post) => ({
    params: { slug: post.slug },
  }))

  return { paths, fallback: true }
}

export async function getStaticProps({ params }) {
  const client = await MongoClient.connect(process.env.MONGODB_URI)
  const db = client.db()
  const postsCollection = db.collection('posts')

  const post = await postsCollection.findOne({ slug: params.slug })

  return {
    props: {
      post: {
        ...post,
        _id: post._id.toString(),
      },
    },
    revalidate: 1,
  }
}

该文件中定义了一个 Post 组件，它接受一个名为 post 的属性，该属性包含要显示的博客文章的标题和内容。getStaticPaths 和 getStaticProps 函数用于从 MongoDB 数据库中获取博客文章数据，并将其传递给 Post 组件。

创建博客列表页面

接下来，我们将创建一个博客列表页面，用于显示所有博客文章。在 pages 目录下创建一个名为 index.js 的文件，该文件将用于显示博客列表。

// javascriptcn.com 代码示例
import Link from 'next/link'
import { MongoClient } from 'mongodb'

export default function Home({ posts }) {
  return (
    <div>
      <h1>My Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post._id}>
            <Link href={`/posts/${post.slug}`}>
              <a>{post.title}</a>
            </Link>
          </li>
        ))}
      </ul>
    </div>
  )
}

export async function getStaticProps() {
  const client = await MongoClient.connect(process.env.MONGODB_URI)
  const db = client.db()
  const postsCollection = db.collection('posts')

  const posts = await postsCollection.find({}, { projection: { title: 1, slug: 1 } }).toArray()

  return {
    props: {
      posts: posts.map((post) => ({
        ...post,
        _id: post._id.toString(),
      })),
    },
    revalidate: 1,
  }
}

该文件中定义了一个 Home 组件，它接受一个名为 posts 的属性，该属性包含要显示的博客文章的标题和 slug。getStaticProps 函数用于从 MongoDB 数据库中获取博客文章数据，并将其传递给 Home 组件。

发布博客文章

现在，我们已经准备好发布博客文章了。打开 MongoDB，插入一条博客文章数据。

db.posts.insertOne({
  title: 'My First Blog Post',
  slug: 'my-first-blog-post',
  content: '<p>Hello, World!</p>',
})

现在，访问 http://localhost:3000/posts/my-first-blog-post，将会显示刚才插入的博客文章。

总结

在本教程中，我们介绍了如何使用 Next.js 和 MongoDB 搭建博客。我们创建了一个 Next.js 应用，配置了 MongoDB 数据库，并创建了博客文章页面和博客列表页面。我们还学习了如何从 MongoDB 数据库中获取博客文章数据，并将其渲染到页面上。

希望本教程能够帮助您搭建自己的博客，并提高您的技术水平。如果您有任何问题或建议，请随时在评论区留言。

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