【实战教程】用 Next.js 和 shadcn-ui 打造当代博客平台

你是否梦想过拥有一个独特、当代化的个人博客平台？今天，我们将一起动手，使用 Next.js 和 shadcn-ui 来创建一个功能丰富、外观精美的博客系统。无论你是刚接触 Web 开发，照旧经验丰富的步伐员，这个教程都将带你step by step地构建一个完备的博客平台，让你的笔墨创作之旅以后与众差异！

  
1. 引言：为什么选择 Next.js 和 shadcn-ui 构建博客平台？

在开始动手之前，让我们先了解为什么 Next.js 和 shadcn-ui 是构建当代博客平台的绝佳选择。

1.1 Next.js 在博客开发中的上风

Next.js 作为一个强大的 React 框架，为博客开发提供了许多上风：

• 服务器端渲染 (SSR): 提高首屏加载速度，对 SEO 友好。
  
• 静态站点生成 (SSG): 预渲染页面，提供极快的加载速度。
  
• 增量静态再生 (ISR): 在保持静态生成上风的同时，允许内容动态更新。
  
• API 路由: 轻松创建后端 API，无需单独的服务器。
  
• 图像优化: 自动优化图片，提升加载性能。
  
• 内置 CSS 支持: 简化样式管理，支持 CSS 模块和 Sass。
  

这些特性使 Next.js 成为构建高性能、SEO 友好的博客平台的抱负选择。
1.2 shadcn-ui 简介及其特点

shadcn-ui 是一个当代化的 UI 组件库，它具有以下特点：

• 可定制性强: 组件设计灵活，易于根据需求进行定制。
  
• 无需安装: 直接复制组件代码到项目中使用。
  
• TypeScript 支持: 提供类型界说，加强开发体验。
  
• 暗黑模式: 内置暗黑模式支持，轻松实现主题切换。
  
• 无停滞设计: 组件符合 ARIA 尺度，提高可访问性。
  

使用 shadcn-ui，我们可以快速构建出美观、功能丰富的用户界面，而无需从零开始设计每个组件。
2. 项目设置和初始化

让我们开始动手创建我们的博客平台！

2.1 创建 Next.js 项目

首先，打开终端，运行以下命令创建一个新的 Next.js 项目：

1. npx create-next-app@latest my-blog-platform
2. cd my-blog-platform

复制代码

在安装过程中，选择以下选项：

1. ✔ Would you like to use TypeScript? … Yes
2. ✔ Would you like to use ESLint? … Yes
3. ✔ Would you like to use Tailwind CSS? … Yes
4. ✔ Would you like to use `src/` directory? … Yes
5. ✔ Would you like to use App Router? (recommended) … Yes
6. ✔ Would you like to customize the default import alias? … No

复制代码

2.2 集成 shadcn-ui

接下来，我们将集成 shadcn-ui 到我们的项目中。运行以下命令：

1. npx shadcn@latest init

复制代码

按照提示进行配置，大多数情况下可以选择默认选项。
2.3 设置项目结构

为了保持项目结构清楚，让我们创建一些必要的目录：

1. mkdir -p src/{components,lib,styles,types}

复制代码

现在我们的项目结构应该如下所示：

1. my-blog-platform/
2. ├── src/
3. │   ├── app/
4. │   ├── components/
5. │   ├── lib/
6. │   ├── styles/
7. │   └── types/
8. ├── public/
9. ├── .eslintrc.json
10. ├── next.config.js
11. ├── package.json
12. └── tsconfig.json

复制代码

3. 设计和实现博客的核心功能

现在我们已经搭建好了根本框架，让我们开始实现博客的核心功能。

3.1 创建博客首页

3.1.1 设计结构组件

首先，我们需要创建一个基础结构组件。在 src/components 目录下创建 Layout.tsx 文件：

1. // src/components/Layout.tsx
2. import React from 'react'
3. import Link from 'next/link'
5. interface LayoutProps {
6.   children: React.ReactNode
7. }
9. export default function Layout({ children }: LayoutProps) {
10.   return (
11.     <div className="min-h-screen bg-background font-sans antialiased">
12.       <header className="border-b">
13.         <nav className="container mx-auto px-4 py-6">
14.           <Link href="/" className="text-2xl font-bold">
15.             My Blog
16.           </Link>
17.         </nav>
18.       </header>
19.       <main className="container mx-auto px-4 py-8">{children}</main>
20.       <footer className="border-t">
21.         <div className="container mx-auto px-4 py-6 text-center">
22.           © 2024 My Blog. All rights reserved.
23.         </div>
24.       </footer>
25.     </div>
26.   )
27. }

复制代码

3.1.2 实现文章列表展示

接下来，我们将创建一个文章列表组件。新建 src/components/PostList.tsx 文件：

1. // src/components/PostList.tsx
2. import React from 'react'
3. import Link from 'next/link'
4. import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
6. interface Post {
7.   id: string
8.   title: string
9.   excerpt: string
10. }
12. interface PostListProps {
13.   posts: Post[]
14. }
16. export default function PostList({ posts }: PostListProps) {
17.   return (
18.     <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
19.       {posts.map((post) => (
20.         <Card key={post.id}>
21.           <CardHeader>
22.             <CardTitle>
23.               <Link href={`/post/${post.id}`} className="hover:underline">
24.                 {post.title}
25.               </Link>
26.             </CardTitle>
27.           </CardHeader>
28.           <CardContent>
29.             <p className="text-muted-foreground">{post.excerpt}</p>
30.           </CardContent>
31.         </Card>
32.       ))}
33.     </div>
34.   )
35. }

复制代码

增长依赖

1. npx shadcn@latest add card

复制代码

现在，我们可以更新首页来使用这些组件。编辑 src/app/page.tsx：

1. // src/app/page.tsx
2. import Layout from '@/components/Layout'
3. import PostList from '@/components/PostList'
5. const dummyPosts = [
6.   { id: '1', title: 'First Post', excerpt: 'This is the first post' },
7.   { id: '2', title: 'Second Post', excerpt: 'This is the second post' },
8.   { id: '3', title: 'Third Post', excerpt: 'This is the third post' },
9. ]
11. export default function Home() {
12.   return (
13.     <Layout>
14.       <h1 className="text-3xl font-bold mb-6">Latest Posts</h1>
15.       <PostList posts={dummyPosts} />
16.     </Layout>
17.   )
18. }

复制代码

3.2 开发文章详情页

3.2.1 使用动态路由

Next.js 提供了强大的动态路由功能。让我们创建文章详情页。新建 src/app/post/[id]/page.tsx 文件：

1. // src/app/post/[id]/page.tsx
2. import Layout from '@/components/Layout'
4. interface PostPageProps {
5.   params: { id: string }
6. }
8. export default function PostPage({ params }: PostPageProps) {
9.   return (
10.     <Layout>
11.       <h1 className="text-3xl font-bold mb-6">Post {params.id}</h1>
12.       <p>This is the content of post {params.id}</p>
13.     </Layout>
14.   )
15. }

复制代码

3.2.2 实现 Markdown 渲染

大多数博客使用 Markdown 格式。让我们添加 Markdown 渲染功能。首先，安装必要的包：

1. npm install react-markdown

复制代码

然后，创建一个 Markdown 渲染组件。新建 src/components/MarkdownRenderer.tsx 文件：

1. // src/components/MarkdownRenderer.tsx
2. import React from 'react'
3. import ReactMarkdown from 'react-markdown'
5. interface MarkdownRendererProps {
6.   content: string
7. }
9. export default function MarkdownRenderer({ content }: MarkdownRendererProps) {
10.   return <ReactMarkdown>{content}</ReactMarkdown>
11. }

复制代码

更新文章详情页以使用 Markdown 渲染：

1. // src/app/post/[id]/page.tsx
2. import Layout from '@/components/Layout'
3. import MarkdownRenderer from '@/components/MarkdownRenderer'
5. interface PostPageProps {
6.   params: { id: string }
7. }
9. const dummyPost = {
10.   id: '1',
11.   title: 'First Post',
12.   content: '# Hello\n\nThis is the content of the first post.',
13. }
15. export default function PostPage({ params }: PostPageProps) {
16.   return (
17.     <Layout>
18.       <h1 className="text-3xl font-bold mb-6">{dummyPost.title}</h1>
19.       <MarkdownRenderer content={dummyPost.content} />
20.     </Layout>
21.   )
22. }

复制代码

3.3 添加批评功能

3.3.1 设计批评组件

让我们创建一个批评组件。新建 src/components/Comments.tsx 文件：

1. // src/components/Comments.tsx
2. import React from 'react'
3. import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
5. interface Comment {
6.   id: string
7.   author: string
8.   content: string
9.   createdAt: string
10. }
12. interface CommentsProps {
13.   comments: Comment[]
14. }
16. export default function Comments({ comments }: CommentsProps) {
17.   return (
18.     <div className="mt-8">
19.       <h2 className="text-2xl font-bold mb-4">Comments</h2>
20.       {comments.map((comment) => (
21.         <Card key={comment.id} className="mb-4">
22.           <CardHeader>
23.             <CardTitle>{comment.author}</CardTitle>
24.             <p className="text-sm text-muted-foreground">
25.               {new Date(comment.createdAt).toLocaleDateString()}
26.             </p>
27.           </CardHeader>
28.           <CardContent>
29.             <p>{comment.content}</p>
30.           </CardContent>
31.         </Card>
32.       ))}
33.     </div>
34.   )
35. }

复制代码

3.3.2 实现批评提交和展示

现在，让我们在文章详情页中添加批评功能。更新 src/app/post/[id]/page.tsx：

1. // src/app/post/[id]/page.tsx
2. "use client"
4. import Layout from '@/components/Layout'
5. import MarkdownRenderer from '@/components/MarkdownRenderer'
6. import Comments from '@/components/Comments'
7. import { Button } from '@/components/ui/button'
8. import { Textarea } from '@/components/ui/textarea'
9. import { useState } from 'react'
11. interface PostPageProps {
12.   params: { id: string }
13. }
15. const dummyPost = {
16.   id: '1',
17.   title: 'First Post',
18.   content: '# Hello\n\nThis is the content of the first post.',
19. }
21. const dummyComments = [
22.   { id: '1', author: 'Alice', content: 'Great post!', createdAt: '2023-09-01T12:00:00Z' },
23.   { id: '2', author: 'Bob', content: 'Thanks for sharing.', createdAt: '2023-09-02T10:30:00Z' },
24. ]
26. export default function PostPage({ params }: PostPageProps) {
27.   const [comments, setComments] = useState(dummyComments)
28.   const [newComment, setNewComment] = useState('')
30.   const handleSubmitComment = (e: React.FormEvent) => {
31.     e.preventDefault()
32.     if (newComment.trim()) {
33.       const comment = {
34.         id: String(comments.length + 1),
35.         author: 'Anonymous', // We'll update this when we add authentication
36.         content: newComment.trim(),
37.         createdAt: new Date().toISOString(),
38.       }
39.       setComments([...comments, comment])
40.       setNewComment('')
41.     }
42.   }
44.   return (
45.     <Layout>
46.       <h1 className="text-3xl font-bold mb-6">{dummyPost.title}</h1>
47.       <MarkdownRenderer content={dummyPost.content} />
48.       <Comments comments={comments} />
49.       <form onSubmit={handleSubmitComment} className="mt-8">
50.         <Textarea
51.           value={newComment}
52.           onChange={(e) => setNewComment(e.target.value)}
53.           placeholder="Write a comment..."
54.           className="mb-4"
55.         />
56.         <Button type="submit">Submit Comment</Button>
57.       </form>
58.     </Layout>
59.   )
60. }

复制代码

1. 这段代码添加了评论列表和评论提交表单。现在，用户可以查看现有评论并添加新评论。

复制代码

4. 使用 Next.js API Routes 构建后端

Next.js 的 API Routes 功能允许我们直接在 Next.js 应用中创建 API 端点。让我们为我们的博客平台创建一些根本的 API。
4.1 创建文章 API

4.1.1 获取文章列表

创建 src/app/api/posts/route.ts 文件：

1. // src/app/api/posts/route.ts
2. import { NextResponse } from 'next/server'
4. const posts = [
5.   { id: '1', title: 'First Post', excerpt: 'This is the first post' },
6.   { id: '2', title: 'Second Post', excerpt: 'This is the second post' },
7.   { id: '3', title: 'Third Post', excerpt: 'This is the third post' },
8. ]
10. export async function GET() {
11.   return NextResponse.json(posts)
12. }

复制代码

4.1.2 获取单篇文章详情

创建 src/app/api/posts/[id]/route.ts 文件：

1. // src/app/api/posts/[id]/route.ts
2. import { NextResponse } from 'next/server'
4. const posts = {
5.   '1': { id: '1', title: 'First Post', content: '# Hello\n\nThis is the content of the first post.' },
6.   '2': { id: '2', title: 'Second Post', content: '# Greetings\n\nThis is the content of the second post.' },
7.   '3': { id: '3', title: 'Third Post', content: '# Welcome\n\nThis is the content of the third post.' },
8. }
10. export async function GET(request: Request, { params }: { params: { id: string } }) {
11.   const post = posts[params.id]
12.   if (post) {
13.     return NextResponse.json(post)
14.   } else {
15.     return NextResponse.json({ error: 'Post not found' }, { status: 404 })
16.   }
17. }

复制代码

4.2 实现批评 API

4.2.1 提交新批评

创建 src/app/api/posts/[id]/comments/route.ts 文件：

1. // src/app/api/posts/[id]/comments/route.ts
2. import { NextResponse } from 'next/server'
4. let comments: { [key: string]: any[] } = {
5.   '1': [
6.     { id: '1', author: 'Alice', content: 'Great post!', createdAt: '2023-09-01T12:00:00Z' },
7.     { id: '2', author: 'Bob', content: 'Thanks for sharing.', createdAt: '2023-09-02T10:30:00Z' },
8.   ],
9. }
11. export async function GET(request: Request, { params }: { params: { id: string } }) {
12.   const postComments = comments[params.id] || []
13.   return NextResponse.json(postComments)
14. }
16. export async function POST(request: Request, { params }: { params: { id: string } }) {
17.   const { author, content } = await request.json()
18.   const newComment = {
19.     id: String(Date.now()),
20.     author,
21.     content,
22.     createdAt: new Date().toISOString(),
23.   }
24.   
25.   if (!comments[params.id]) {
26.     comments[params.id] = []
27.   }
28.   comments[params.id].push(newComment)
29.   
30.   return NextResponse.json(newComment, { status: 201 })
31. }

复制代码

现在我们有了根本的 API 端点，可以获取文章列表、单篇文章详情，以及提交和获取批评。
5. 集成数据库

为了使我们的博客平台更加动态和可扩展，我们需要集成一个数据库。在这个例子中，我们将使用 MongoDB，因为它易于设置和使用。
5.1 选择和设置 MongoDB

首先，我们需要安装必要的依赖：

1. npm install mongodb

复制代码

然后，创建一个 MongoDB Atlas 账户并设置一个新的集群。获取连接字符串后，将其添加到项目的环境变量中。创建一个 .env.local 文件：

1. MONGODB_URI=your_mongodb_connection_string_here

复制代码

5.2 创建数据模型

让我们创建一些根本的数据模型。在 src/lib 目录下创建 db.ts 文件：

1. // src/lib/db.ts
2. import { MongoClient } from 'mongodb'
4. if (!process.env.MONGODB_URI) {
5.   throw new Error('Invalid/Missing environment variable: "MONGODB_URI"')
6. }
8. const uri = process.env.MONGODB_URI
9. const options = {}
11. let client
12. let clientPromise: Promise<MongoClient>
14. if (process.env.NODE_ENV === 'development') {
15.   // 在开发模式下，使用全局变量，以便在 HMR（热模块替换）导致的模块重新加载之间保留该值。
16.   if (!(global as any)._mongoClientPromise) {
17.     client = new MongoClient(uri, options)
18.     ;(global as any)._mongoClientPromise = client.connect()
19.   }
20.   clientPromise = (global as any)._mongoClientPromise
21. } else {
22.   // In production mode, it's best to not use a global variable.
23.   client = new MongoClient(uri, options)
24.   clientPromise = client.connect()
25. }
27. export default clientPromise

复制代码

5.3 连接数据库并实现 CRUD 操作

现在，让我们更新我们的 API 路由以使用 MongoDB。首先，更新文章 API：

1. // src/app/api/posts/route.ts
2. import { NextResponse } from 'next/server'
3. import clientPromise from '@/lib/db'
5. export async function GET() {
6.   try {
7.     const client = await clientPromise
8.     const db = client.db('blog')
9.     const posts = await db.collection('posts').find({}).toArray()
10.     return NextResponse.json(posts)
11.   } catch (e) {
12.     console.error(e)
13.     return NextResponse.json({ error: 'Failed to fetch posts' }, { status: 500 })
14.   }
15. }

复制代码

同样，更新单篇文章 API：

1. // src/app/api/posts/[id]/route.ts
2. import { NextResponse } from 'next/server'
3. import clientPromise from '@/lib/db'
4. import { ObjectId } from 'mongodb'
6. export async function GET(request: Request, { params }: { params: { id: string } }) {
7.   try {
8.     const client = await clientPromise
9.     const db = client.db('blog')
10.     const post = await db.collection('posts').findOne({ _id: new ObjectId(params.id) })
11.    
12.     if (post) {
13.       return NextResponse.json(post)
14.     } else {
15.       return NextResponse.json({ error: 'Post not found' }, { status: 404 })
16.     }
17.   } catch (e) {
18.     console.error(e)
19.     return NextResponse.json({ error: 'Failed to fetch post' }, { status: 500 })
20.   }
21. }

复制代码

最后，更新批评 API：

1. // src/app/api/posts/[id]/comments/route.ts
2. import { NextResponse } from 'next/server'
3. import clientPromise from '@/lib/db'
4. import { ObjectId } from 'mongodb'
6. export async function GET(request: Request, { params }: { params: { id: string } }) {
7.   try {
8.     const client = await clientPromise
9.     const db = client.db('blog')
10.     const comments = await db.collection('comments').find({ postId: new ObjectId(params.id) }).toArray()
11.     return NextResponse.json(comments)
12.   } catch (e) {
13.     console.error(e)
14.     return NextResponse.json({ error: 'Failed to fetch comments' }, { status: 500 })
15.   }
16. }
18. export async function POST(request: Request, { params }: { params: { id: string } }) {
19.   try {
20.     const { author, content } = await request.json()
21.     const client = await clientPromise
22.     const db = client.db('blog')
23.     const newComment = {
24.       postId: new ObjectId(params.id),
25.       author,
26.       content,
27.       createdAt: new Date().toISOString(),
28.     }
29.     const result = await db.collection('comments').insertOne(newComment)
30.     return NextResponse.json({ ...newComment, _id: result.insertedId }, { status: 201 })
31.   } catch (e) {
32.     console.error(e)
33.     return NextResponse.json({ error: 'Failed to add comment' }, { status: 500 })
34.   }
35. }

复制代码

这些更新将使我们的博客平台使用 MongoDB 数据库来存储和检索数据。
6. 实现用户认证

为了让用户能够发表批评和管理自己的文章，我们需要实现用户认证。我们将使用 NextAuth.js，它是一个灵活的认证办理方案，专为 Next.js 设计。
6.1 设置 NextAuth.js

首先，安装 NextAuth.js：

1. npm install next-auth

复制代码

然后，创建一个 NextAuth.js 配置文件。在 src/app 目录下创建 api/auth/[...nextauth]/route.ts 文件：

1. // src/app/api/auth/[...nextauth]/route.ts
2. import NextAuth from "next-auth"
3. import GithubProvider from "next-auth/providers/github"
5. const handler = NextAuth({
6.   providers: [
7.     GithubProvider({
8.       clientId: process.env.GITHUB_ID as string,
9.       clientSecret: process.env.GITHUB_SECRET as string,
10.     }),
11.   ],
12. })
14. export { handler as GET, handler as POST }

复制代码

确保在 .env.local 文件中添加 GitHub OAuth 应用的凭证：

1. GITHUB_ID=your_github_client_id
2. GITHUB_SECRET=your_github_client_secret
3. NEXTAUTH_SECRET=your_nextauth_secret

复制代码

6.2 创建登录和注册页面

创建一个简朴的登录页面。在 src/app/login/page.tsx 中：

1. // src/app/login/page.tsx
2. 'use client'
4. import { signIn } from 'next-auth/react'
5. import { Button } from '@/components/ui/button'
7. export default function LoginPage() {
8.   return (
9.     <div className="flex items-center justify-center min-h-screen">
10.       <Button onClick={() => signIn('github')}>Sign in with GitHub</Button>
11.     </div>
12.   )
13. }

复制代码

6.3 实现受掩护的路由和操作

为了掩护某些路由或操作，我们可以创建一个高阶组件。在 src/components 目录下创建 ProtectedRoute.tsx：

1. // src/components/ProtectedRoute.tsx
2. 'use client'
4. import { useSession } from 'next-auth/react'
5. import { useRouter } from 'next/navigation'
6. import { useEffect } from 'react'
8. export default function ProtectedRoute({ children }: { children: React.ReactNode }) {
9.   const { data: session, status } = useSession()
10.   const router = useRouter()
12.   useEffect(() => {
13.     if (status === 'loading') return // Do nothing while loading
14.     if (!session) router.push('/login')
15.   }, [session, status])
17.   if (status === 'loading') {
18.     return <div>Loading...</div>
19.   }
21.   return session ? <>{children}</> : null
22. }

复制代码

现在，你可以在需要用户登录的页面中使用这个组件。比方，在创建新文章的页面：

1. // src/app/new-post/page.tsx
2. import ProtectedRoute from '@/components/ProtectedRoute'
3. import NewPostForm from '@/components/NewPostForm'
5. export default function NewPostPage() {
6.   return (
7.     <ProtectedRoute>
8.       <NewPostForm />
9.     </ProtectedRoute>
10.   )
11. }

复制代码

这样，只有登录的用户才能访问创建新文章的页面。
7. 优化用户界面和用户体验

7.1 响应式设计

我们的博客平台已经使用了 Tailwind CSS，这使得创建响应式设计变得简朴。确保在构建组件时使用 Tailwind 的响应式类，比方 md:, lg: 等。
7.2 添加加载状态和错误处置惩罚

为了提升用户体验，我们应该添加加载状态和错误处置惩罚。比方，在文章列表页面：

1. // src/app/page.tsx
2. 'use client'
4. import { useState, useEffect } from 'react'
5. import Layout from '@/components/Layout'
6. import PostList from '@/components/PostList'
7. import { Spinner } from '@/components/ui/spinner'
8. import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
10. export default function Home() {
11.   const [posts, setPosts] = useState([])
12.   const [isLoading, setIsLoading] = useState(true)
13.   const [error, setError] = useState(null)
15.   useEffect(() => {
16.     async function fetchPosts() {
17.       try {
18.         const response = await fetch('/api/posts')
19.         if (!response.ok) {
20.           throw new Error('Failed to fetch posts')
21.         }
22.         const data = await response.json()
23.         setPosts(data)
24.       } catch (err) {
25.         setError(err.message)
26.       } finally {
27.         setIsLoading(false)
28.       }
29.     }
31.     fetchPosts()
32.   }, [])
34.   return (
35.     <Layout>
36.       <h1 className="text-3xl font-bold mb-6">Latest Posts</h1>
37.       {isLoading ? (
38.         <div className="flex justify-center">
39.           <Spinner size="lg" />
40.         </div>
41.       ) : error ? (
42.         <Alert variant="destructive">
43.           <AlertTitle>Error</AlertTitle>
44.           <AlertDescription>{error}</AlertDescription>
45.         </Alert>
46.       ) : (
47.         <PostList posts={posts} />
48.       )}
49.     </Layout>
50.   )
51. }

复制代码

7.3 实现无限滚动加载

为了提升大量文章的加载体验，我们可以实现无限滚动。首先，我们需要更新我们的 API 以支持分页：

1. // src/app/api/posts/route.ts
2. import { NextResponse } from 'next/server'
3. import clientPromise from '@/lib/db'
5. export async function GET(request: Request) {
6.   const { searchParams } = new URL(request.url)
7.   const page = parseInt(searchParams.get('page') || '1', 10)
8.   const limit = parseInt(searchParams.get('limit') || '10', 10)
10.   try {
11.     const client = await clientPromise
12.     const db = client.db('blog')
13.     const posts = await db.collection('posts')
14.       .find({})
15.       .sort({ createdAt: -1 })
16.       .skip((page - 1) * limit)
17.       .limit(limit)
18.       .toArray()
20.     const total = await db.collection('posts').countDocuments()
22.     return NextResponse.json({
23.       posts,
24.       currentPage: page,
25.       totalPages: Math.ceil(total / limit)
26.     })
27.   } catch (e) {
28.     console.error(e)
29.     return NextResponse.json({ error: 'Failed to fetch posts' }, { status: 500 })
30.   }
31. }

复制代码

然后，我们可以在前端实现无限滚动。我们将使用 react-intersection-observer 库来检测滚动到底部的时机：

1. npm install react-intersection-observer

复制代码

更新 src/app/page.tsx：

1. 'use client'
3. import { useState, useEffect } from 'react'
4. import { useInView } from 'react-intersection-observer'
5. import Layout from '@/components/Layout'
6. import PostList from '@/components/PostList'
7. import { Spinner } from '@/components/ui/spinner'
8. import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
10. export default function Home() {
11.   const [posts, setPosts] = useState([])
12.   const [page, setPage] = useState(1)
13.   const [isLoading, setIsLoading] = useState(true)
14.   const [error, setError] = useState(null)
15.   const [hasMore, setHasMore] = useState(true)
17.   const { ref, inView } = useInView({
18.     threshold: 0,
19.   })
21.   useEffect(() => {
22.     if (inView && hasMore) {
23.       loadMorePosts()
24.     }
25.   }, [inView, hasMore])
27.   async function loadMorePosts() {
28.     setIsLoading(true)
29.     try {
30.       const response = await fetch(`/api/posts?page=${page}&limit=10`)
31.       if (!response.ok) {
32.         throw new Error('Failed to fetch posts')
33.       }
34.       const data = await response.json()
35.       setPosts((prevPosts) => [...prevPosts, ...data.posts])
36.       setPage((prevPage) => prevPage + 1)
37.       setHasMore(data.currentPage < data.totalPages)
38.     } catch (err) {
39.       setError(err.message)
40.     } finally {
41.       setIsLoading(false)
42.     }
43.   }
45.   return (
46.     <Layout>
47.       <h1 className="text-3xl font-bold mb-6">Latest Posts</h1>
48.       {posts.length > 0 && <PostList posts={posts} />}
49.       {error && (
50.         <Alert variant="destructive">
51.           <AlertTitle>Error</AlertTitle>
52.           <AlertDescription>{error}</AlertDescription>
53.         </Alert>
54.       )}
55.       {isLoading && (
56.         <div className="flex justify-center mt-4">
57.           <Spinner size="lg" />
58.         </div>
59.       )}
60.       <div ref={ref} style={{ height: '10px' }} />
61.     </Layout>
62.   )
63. }

复制代码

8. 性能优化

8.1 实现静态生成（SSG）和增量静态再生（ISR）

Next.js 提供了强大的静态生成和增量静态再生功能。对于博客文章这种不经常更新的内容，我们可以使用这些功能来提高性能。
更新 src/app/post/[id]/page.tsx：

1. import { Suspense } from 'react'
2. import { notFound } from 'next/navigation'
3. import Layout from '@/components/Layout'
4. import MarkdownRenderer from '@/components/MarkdownRenderer'
5. import Comments from '@/components/Comments'
6. import clientPromise from '@/lib/db'
7. import { ObjectId } from 'mongodb'
9. async function getPost(id: string) {
10.   const client = await clientPromise
11.   const db = client.db('blog')
12.   const post = await db.collection('posts').findOne({ _id: new ObjectId(id) })
13.   if (!post) {
14.     notFound()
15.   }
16.   return post
17. }
19. export async function generateStaticParams() {
20.   const client = await clientPromise
21.   const db = client.db('blog')
22.   const posts = await db.collection('posts').find({}, { projection: { _id: 1 } }).toArray()
23.   
24.   return posts.map((post) => ({
25.     id: post._id.toString(),
26.   }))
27. }
29. export default async function PostPage({ params }: { params: { id: string } }) {
30.   const post = await getPost(params.id)
32.   return (
33.     <Layout>
34.       <h1 className="text-3xl font-bold mb-6">{post.title}</h1>
35.       <MarkdownRenderer content={post.content} />
36.       <Suspense fallback={<div>Loading comments...</div>}>
37.         <Comments postId={params.id} />
38.       </Suspense>
39.     </Layout>
40.   )
41. }
43. export const revalidate = 3600 // Revalidate every hour

复制代码

8.2 图片优化

Next.js 提供了内置的图像优化组件。确保在整个应用中使用 next/image 组件：

1. import Image from 'next/image'
3. // In your component
4. <Image src="/path/to/image.jpg" alt="Description" width={500} height={300} />

复制代码

8.3 代码分割和懒加载

Next.js 默认进行代码分割，但我们可以通过动态导入进一步优化：

1. import dynamic from 'next/dynamic'
3. const DynamicComponent = dynamic(() => import('@/components/HeavyComponent'), {
4.   loading: () => <p>Loading...</p>,
5. })

复制代码

9. 部署博客平台

9.1 准备生产环境配置

确保全部环境变量都已精确设置。创建一个 .env.production 文件来存储生产环境特定的变量。
9.2 选择符合的部署平台

对于 Next.js 应用，Vercel 是一个很好的选择，因为它是由 Next.js 的创建者开发的。
9.3 部署过程和注意事项

• 将你的代码推送到 GitHub 仓库。
  
• 在 Vercel 上创建一个新项目，并连接到你的 GitHub 仓库。
  
• 配置你的环境变量。
  
• 部署你的应用。
  

确保在部署之前运行构建命令并修复任何警告或错误：

1. npm run build

复制代码

10. 总结与下一步

10.1 回顾学到的核心概念

在这个项目中，我们学习了：

• 使用 Next.js 创建全栈应用
  
• 集成 shadcn-ui 构建美观的用户界面
  
• 实现服务器端渲染和 API 路由
  
• 使用 MongoDB 进行数据持久化
  
• 实现用户认证和授权
  
• 优化应用性能和用户体验
  

10.2 扩展功能的想法

• 实现文章搜索功能
  
• 添加标签和分类系统
  
• 集成富文本编辑器
  
• 实现用户个人资料页面
  
• 添加外交分享功能
  

10.3 持续学习的资源保举

• Next.js 官方文档
  
• React 官方文档
  
• MongoDB 大学
  
• Vercel 部署文档
  

通过这个项目，你已经掌握了使用 Next.js 和 shadcn-ui 构建当代博客平台的核心技能。继承探索和实践，你将能够构建更加复杂和功能丰富的 Web 应用。记住，学习是一个持续的过程，保持好奇心和实践精神，你将在 Web 开发范畴取得更大的进步！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。