用 Next.js 打造一个多作者博客：一步一步指导

2023-12-18 06:57:21

引言

Next.js 是一个用于构建 React 应用程序的框架，而 Next.js 博客是一个使用 Next.js 构建的博客网站，旨在帮助开发者快速、轻松地创建和管理自己的博客。本教程将指导您使用 Next.js 构建一个多作者博客，使您能够创建和管理多个作者的博客帖子，为每个帖子指定作者，并在帖子旁边显示作者的姓名和照片，每个作者都有一个简介页，列出他们所有贡献的文章。

步骤 1：创建 Next.js 项目

首先，让我们创建一个新的 Next.js 项目。在终端中运行以下命令：

npx create-next-app next-blog

这将在当前目录中创建一个新的 Next.js 项目，名为 next-blog。

步骤 2：安装必要的依赖项

接下来，我们需要安装一些必要的依赖项。在终端中运行以下命令：

npm install next-auth next-connect mongodb@4.5.2 react-markdown

next-auth：用于处理用户身份验证。
next-connect：用于处理 API 路由。
mongodb：用于存储博客文章和其他数据。
react-markdown：用于解析 Markdown 内容。

步骤 3：配置 Next.js

现在，我们需要配置 Next.js。在 next.config.js 文件中，添加以下代码：

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['localhost']
  }
};

这将启用严格模式并允许您在博客中使用图像。

步骤 4：创建 API 路由

接下来，我们需要创建 API 路由来处理博客文章和其他数据。在 pages/api 目录下，创建以下文件：

posts.js
authors.js

在 posts.js 文件中，添加以下代码：

import { connectToDatabase } from '../../lib/mongodb';

export default async function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'GET':
      const posts = await getPosts();
      res.status(200).json(posts);
      break;
    case 'POST':
      const newPost = await createPost(req.body);
      res.status(201).json(newPost);
      break;
    default:
      res.status(405).end();
      break;
  }
}

async function getPosts() {
  const { db } = await connectToDatabase();
  const posts = await db.collection('posts').find({}).toArray();
  return posts;
}

async function createPost(post) {
  const { db } = await connectToDatabase();
  const newPost = await db.collection('posts').insertOne(post);
  return newPost.ops[0];
}

在 authors.js 文件中，添加以下代码：

import { connectToDatabase } from '../../lib/mongodb';

export default async function handler(req, res) {
  const { method } = req;

  switch (method) {
    case 'GET':
      const authors = await getAuthors();
      res.status(200).json(authors);
      break;
    case 'POST':
      const newAuthor = await createAuthor(req.body);
      res.status(201).json(newAuthor);
      break;
    default:
      res.status(405).end();
      break;
  }
}

async function getAuthors() {
  const { db } = await connectToDatabase();
  const authors = await db.collection('authors').find({}).toArray();
  return authors;
}

async function createAuthor(author) {
  const { db } = await connectToDatabase();
  const newAuthor = await db.collection('authors').insertOne(author);
  return newAuthor.ops[0];
}

这些 API 路由将用于处理博客文章和作者的数据。

步骤 5：创建数据库

接下来，我们需要创建一个 MongoDB 数据库来存储博客文章和其他数据。在终端中运行以下命令：

mongod --dbpath data/db

这将启动一个 MongoDB 数据库实例。

步骤 6：创建博客文章

现在，我们可以开始创建博客文章了。在 pages/index.js 文件中，添加以下代码：

import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import { useState, useEffect } from 'react';
import { getPosts } from '../lib/posts';

export default function Home({ posts }) {
  const [currentPage, setCurrentPage] = useState(1);
  const [postsPerPage] = useState(5);

  const paginatedPosts = posts.slice(
    (currentPage - 1) * postsPerPage,
    currentPage * postsPerPage
  );

  return (
    <div>
      <Head>
        
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>Next.js Blog</h1>

        {paginatedPosts.map((post) => (
          <article key={post._id}>
            <Link href={`/posts/${post.slug}`}>
              <a><h2>{post.title}</h2></a>
            </Link>
            <p>{post.excerpt}</p>
            <small>{post.author.name}</small>
          </article>
        ))}
      </main>

      <nav>
        <button onClick={() => setCurrentPage(currentPage - 1)}>Previous</button>
        <button onClick={() => setCurrentPage(currentPage + 1)}>Next</button>
      </nav>
    </div>
  );
}

export async function getStaticProps() {
  const posts = await getPosts();
  return {
    props: {
      posts
    }
  };
}

这个页面将显示所有博客文章。

步骤 7：创建作者简介页

接下来，我们需要创建一个作者简介页。在 pages/authors/[id].js 文件中，添加以下代码：

import Head from 'next/head';
import Image from 'next/image';
import { getAuthorById } from '../../lib/authors';

export default function Author({ author }) {
  return (
    <div>
      <Head>
        
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>{author.name}</h1>
        <Image src={author.image} alt={author.name} width={100} height={100} />
        <p>{author.bio}</p>

        <h2>Posts by {author.name}</h2>

        <ul>
          {author.posts.map((post) => (
            <li key={post._id}>
              <Link href={`/posts/${post.slug}`}>
                <a>{post.title}</a>
              </Link>
            </li>
          ))}
        </ul>
      </main>
    </div>
  );
}

export async function getStaticProps({ params }) {
  const author = await getAuthorById(params.id);
  return {
    props: {
      author
    }
  };
}

这个页面将显示作者的个人信息和他们发布的所有文章。

步骤 8：添加样式

现在，我们需要添加一些样式。在 styles/main.css 文件中，添加以下代码：

body {
  font-family: 'Arial', sans-serif;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

p {
  font-size: 1em;
}

a {
  color: blue;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: block;
}

img {
  max-width: 100%;
}