# Next.js 开发技巧该技能为使用 App Router、服务器组件、数据获取模式、路由、API 路由、中间件和基于官方 Next.js 文档的全栈开发技术构建现代 Next.js 应用程序提供了全面的指导。 ## 何时使用此技能在以下情况下使用此技能： * 使用服务器端渲染（SSR）构建全栈 React 应用程序 * 使用增量静态再生 (ISR) 创建静态站点 * 使用 React Server 组件开发现代 Web 应用程序 * 使用无服务器路由处理程序构建 API 后端 * 使用元数据和开放图谱实施 SEO 优化的应用程序 * 创建具有内置优化的生产就绪 Web 应用程序 * 构建电子商务、博客、仪表板或内容驱动的网站 * 实现身份验证、数据获取和复杂的路由模式 * 自动优化图像、字体和性能 * 部署具有边缘计算能力的无服务器应用程序 ## 核心概念 ### 应用程序路由器 App Router 是 Next.js 基于 React Server 组件构建的现代路由系统。它使用“app”目录进行具有增强功能的基于文件的路由。 **基本应用程序结构：** 应用程序/ ├──layout.tsx # 根布局（必填） ├── page.tsx # 首页 ├──loading.tsx # 加载UI ├── error.tsx # 错误界面 ├── not-found.tsx # 404 页 ├── 关于/ │ └── page.tsx # /about 路线 └── 博客/ ├── page.tsx # /blog 路线 ├── [鼻涕虫]/ │ └── page.tsx # /blog/[slug] 动态路由 └──layout.tsx # 博客布局 **根布局（必填）：** // 应用程序/layout.tsx 导出默认函数 RootLayout({ 孩子们， }：{ 子级：React.ReactNode }) { 返回（ {孩子} ） } **页面组件：** // 应用程序/page.tsx 导出默认函数 HomePage() { 返回（ <主要>

欢迎来到 Next.js

构建现代 Web 应用程序

） } ### 服务器组件服务器组件是在服务器上呈现的 React 组件。它们是 App Router 中的默认设置，可提供更好的性能。 **服务器组件（默认）：** // 应用程序/帖子/page.tsx 异步函数 getPosts() { const res = 等待 fetch('https://api.example.com/posts', { cache: 'force-cache' // 静态生成 }) 返回 res.json() } 导出默认异步函数 PostsPage() { const posts = 等待 getPosts() 返回（

博客文章

{posts.map((post) => ( <文章键={post.id}>

{帖子.标题}

{帖子摘录}

))}

） } **客户端组件（需要时）：** “使用客户端” 从 'react' 导入 { useState } 导出默认函数 Counter() { const [计数，setCount] = useState(0) 返回（

计数：{count}

<按钮 onClick={() => setCount(count + 1)}> 增量

） } **混合服务器和客户端组件：** // app/dashboard/page.tsx（服务器组件）从 './ClientCounter' 导入 ClientCounter 异步函数 getData() { const res = 等待 fetch('https://api.example.com/data') 返回 res.json() } 导出默认异步函数 DashboardPage() { 常量数据 = 等待 getData() 返回（

仪表板

服务器数据：{data.value}

{/* 用于交互的客户端组件 */} <客户端计数器/>

） } ### 数据获取 Next.js 通过自动缓存和重新验证扩展了原生的 fetch() API。 **静态数据获取（默认）：** 异步函数 getStaticData() { const res = 等待 fetch('https://api.example.com/data', { cache: 'force-cache' // 默认，相当于 getStaticProps }) 返回 res.json() } 导出默认异步函数 Page() { const 数据 = 等待 getStaticData() 返回

{data.title}

} **动态数据获取：** 异步函数 getDynamicData() { const res = 等待 fetch('https://api.example.com/data', { cache: 'no-store' // 相当于 getServerSideProps }) 返回 res.json() } 导出默认异步函数 Page() { const 数据 = 等待 getDynamicData() 返回

{data.title}

} **重新验证（ISR）：** 异步函数 getRevalidatedData() { const res = 等待 fetch('https://api.example.com/data', { next: { revalidate: 60 } // 每 60 秒重新验证一次 }) 返回 res.json() } 导出默认异步函数 Page() { const 数据 = 等待 getRevalidatedData() 返回

{data.title}

} **并行数据获取：** 异步函数 getUser(id: string) { const res = 等待 fetch(`https://api.example.com/users/${id}`) 返回 res.json() } 异步函数 getUserPosts(id: string) { const res = 等待 fetch(`https://api.example.com/users/${id}/posts`) 返回 res.json() } 导出默认异步函数 UserPage({ params }: { params: { id: string } }) { // 并行获取 const [用户，帖子] =等待 Promise.all([ getUser(params.id), 获取用户帖子(params.id) ]）返回（

{用户名}

{post.title}

） } **顺序数据获取：** 异步函数 getUser(id: string) { const res = 等待 fetch(`https://api.example.com/users/${id}`) 返回 res.json() } 异步函数 getRecommendations(首选项: string[]) { const res = 等待 fetch('https://api.example.com/recommendations', { 方法：'POST'，正文： JSON.stringify({ 偏好 }) }) 返回 res.json() } 导出默认异步函数 UserPage({ params }: { params: { id: string } }) { // 首先获取用户 const user = 等待 getUser(params.id) // 然后根据用户数据获取推荐 const 推荐 = 等待 getRecommendations(user.preferences) 返回（

{用户名}

建议

{item.title}

） } ### 路由 Next.js 在“app”目录中使用基于文件系统的路由。 **动态路线：** // 应用程序/博客/[slug]/page.tsx 导出默认函数 BlogPost({ params }: { params: { slug: string } }) { 返回

帖子：{params.slug}

} // 在构建时为这些 slugs 生成静态页面导出异步函数generateStaticParams() { const posts = wait fetch('https://api.example.com/posts').then(r => r.json()) 返回 posts.map((post) => ({ slug：post.slug， }）） } **包罗万象的路线：** // 应用程序/文档/[...slug]/page.tsx 导出默认函数 DocsPage({ params }: { params: { slug: string[] } }) { // /docs/a/b/c -> params.slug = ['a', 'b', 'c'] 返回

文档：{params.slug.join('/')}

} **可选的全包路线：** // app/shop/[[...slug]]/page.tsx 导出默认函数 ShopPage({ params }: { params: { slug?: string[] } }) { // /shop -> params.slug = 未定义 // /shop/clothes -> params.slug = ['衣服'] // /shop/clothes/tops -> params.slug = ['衣服', '上衣'] return

Shop: {params.slug?.join('/') || “全部”}

} **路线组：** 应用程序/ ├── (marketing)/ # 路由组（不在 URL 中） │ ├── 关于/ │ │ └── page.tsx # /about │ └── 联系方式/ │ └── page.tsx # /contact └──（店）/ ├── 产品/ │ └── page.tsx # /产品 └── 购物车/ └── page.tsx # /cart **平行路线：** 应用程序/ ├── @analytics/ │ └── 页.tsx ├── @团队/ │ └── 页.tsx └── 布局.tsx // 应用程序/layout.tsx 导出默认函数Layout({ 孩子们，分析，团队， }：{ 子级：React.ReactNode 分析：React.ReactNode 团队：React.ReactNode }) { 返回（ <> {孩子} {分析} {团队} ） } **拦截路线：** 应用程序/ ├── 饲料/ │ └── 页.tsx ├── 照片/ │ └── [id]/ │ └── 页.tsx └── @modal/ └── (.)照片/ └── [id]/ └── page.tsx # Intercepts /photo/[id] when navigating from /feed ### 布局布局包装页面并在导航中保留状态。 **嵌套布局：** // app/layout.tsx（根布局）导出默认函数 RootLayout({ Children }: { Children: React.ReactNode }) { 返回（ <正文> <标题> {孩子} ） } // app/dashboard/layout.tsx（仪表板布局）导出默认函数 DashboardLayout({ Children }: { Children: React.ReactNode }) { 返回（

<主>{子}

） } // 应用程序/仪表板/page.tsx 导出默认函数 DashboardPage() { 返回

仪表板

} **模板（在导航上重新渲染）：** // 应用程序/模板.tsx export default function Template({ children }: { children: React.ReactNode }) { 返回（

{/* 这会在每个导航上创建一个新实例 */} {孩子}

） } ### 加载用户界面特殊的“loading.tsx”文件使用 React Suspense 创建加载状态。 **加载状态：** // 应用程序/仪表板/loading.tsx 导出默认函数 Loading() { 返回（

正在加载仪表板...

） } // 应用程序/仪表板/page.tsx 异步函数 getData() { const res = 等待 fetch('https://api.example.com/data') 返回 res.json() } 导出默认异步函数 DashboardPage() { 常量数据 = 等待 getData() 返回

{data.content}

} **Streaming with Suspense:** // 应用程序/page.tsx import { Suspense } from 'react' 异步函数 SlowComponent() { 等待新的 Promise(resolve => setTimeout(resolve, 3000)) return

数据加载缓慢

} 导出默认函数 Page() { 返回（

页面

正在加载缓慢组件...

}> <慢速组件/> ） } ### 错误处理特殊的“error.tsx”文件处理带有错误边界的错误。 **误差边界：** // 应用程序/error.tsx 'use client' // 错误组件必须是客户端组件导出默认函数Error({ 错误，重置， }：{ 错误：错误&{摘要？：字符串} 重置：() => 无效 }) { 返回（

出了点问题！

{错误消息}

） } **全局错误：** // 应用程序/全局错误.tsx “使用客户端” 导出默认函数 GlobalError({ 错误，重置， }：{ 错误：错误&{摘要？：字符串} 重置：() => 无效 }) { 返回（ <正文>

应用程序错误

） } **Not Found:** // 应用程序/not-found.tsx 从“下一个/链接”导入链接导出默认函数 NotFound() { 返回（

找不到页面

找不到请求的资源

Return Home

） } ### API 路由路由处理程序允许您使用 Web 请求和响应 API 创建 API 端点。 **基本API路线：** // app/api/hello/route.ts 导出异步函数 GET(请求: 请求) { return Response.json({ message: '来自 Next.js 的问候！' }) } **动态路由处理程序：** // 应用程序/api/posts/[id]/route.ts 导出异步函数 GET( 请求：请求， { 参数 }: { 参数: { id: 字符串 } } ）{ const id = params.id const post = wait db.post.findUnique({ 其中：{ id } }) 如果（！post）{ return new Response('Post not found', { status: 404 }) } 返回 Response.json(post) } 导出异步函数 DELETE( 请求：请求， { 参数 }: { 参数: { id: 字符串 } } ）{ 等待 db.post.delete({ 其中：{ id: params.id } }) 返回新的响应（null，{状态：204}） } **POST Request with Body:** // 应用程序/api/posts/route.ts 导出异步函数 POST(request: Request) { const body = 等待 request.json() const post = 等待 db.post.create({ 数据：{ 标题：正文.标题，内容：正文.内容， } }) 返回 Response.json(post, { status: 201 }) } **带标头的请求：** // 应用程序/api/protected/route.ts 导出异步函数 GET(请求: 请求) { const token = request.headers.get('授权') 如果（！令牌）{ 返回新的响应（'未经授权'，{状态：401}） } const 用户 = 等待 verifyToken(令牌) 返回 Response.json({ 用户 }) } **搜索参数：** // 应用程序/api/search/route.ts 导出异步函数 GET(请求: 请求) { const { searchParams } = 新 URL(request.url) const 查询 = searchParams.get('q') const page = searchParams.get('page') || ‘1’ const 结果 = 等待搜索（查询，parseInt（页面））返回Response.json（结果） } **CORS 标头：** // 应用程序/api/public/route.ts 导出异步函数 GET(请求: 请求) { const data = { message: '公共 API' } 返回 Response.json(数据, { 标题：{ '访问控制允许来源': '*', '访问控制允许方法': 'GET、POST、PUT、DELETE、OPTIONS', '访问控制允许标头'：'内容类型，授权'， }, }) } 导出异步函数 OPTIONS(请求: 请求) { 返回新的响应（空，{ 状态：204，标题：{ '访问控制允许来源': '*', '访问控制允许方法': 'GET、POST、PUT、DELETE、OPTIONS', '访问控制允许标头'：'内容类型，授权'， }, }) } ### 中间件 Middleware runs before a request is completed, allowing you to modify the response. **基本中间件：** // 中间件.ts 从 'next/server' 导入 { NextResponse } 从 'next/server' 导入类型 { NextRequest } 导出函数中间件（请求：NextRequest）{ // 克隆请求头 const requestHeaders = new headers(request.headers) requestHeaders.set('x-custom-header', '自定义值') // 返回带有修改后的标头的响应返回 NextResponse.next({ 请求：{ 标头：请求标头， }, }) } 导出常量配置= { 匹配器: '/api/:path*', } **身份验证中间件：** // 中间件.ts 从 'next/server' 导入 { NextResponse } 从 'next/server' 导入类型 { NextRequest } 导出函数中间件（请求：NextRequest）{ const token = request.cookies.get('token')?.value // 如果没有 token 则重定向到登录 if (!token && request.nextUrl.pathname.startsWith('/dashboard')) { 返回 NextResponse.redirect(new URL('/login', request.url)) } // 如果已经登录则重定向到仪表板 if (token && request.nextUrl.pathname === '/login') { 返回 NextResponse.redirect(new URL('/dashboard', request.url)) } 返回 NextResponse.next() } 导出常量配置= { 匹配器: ['/dashboard/:path*', '/login'], } **地理位置和重写：** // 中间件.ts 从 'next/server' 导入 { NextResponse } 从 'next/server' 导入类型 { NextRequest } 导出函数中间件（请求：NextRequest）{ const 国家 = request.geo?.country || “美国” // 根据国家重写 if (country === 'GB') { return NextResponse.rewrite(new URL('/gb' + request.nextUrl.pathname, request.url)) } 返回 NextResponse.next() } **速率限制：** // 中间件.ts 从 'next/server' 导入 { NextResponse } 从 'next/server' 导入类型 { NextRequest } 从 '@upstash/ratelimit' 导入 { Ratelimit } 从 '@upstash/redis' 导入 { Redis } 常量速率限制 = 新速率限制({ redis: Redis.fromEnv(), 限制器：Ratelimit.slidingWindow(10, '10 s'), }) 导出异步函数中间件（请求：NextRequest）{ const ip = 请求.ip ?? ‘127.0.0.1’ const { success } =等待ratelimit.limit(ip) 如果（！成功）{ return new Response('请求太多', { status: 429 }) } 返回 NextResponse.next() } 导出常量配置= { 匹配器: '/api/:path*', } ### 元数据和 SEO Next.js 提供了用于定义页面元数据的元数据 API。 **静态元数据：** // 应用程序/about/page.tsx 从“下一个”导入类型{元数据} 导出常量元数据：元数据 = { 标题：“关于我们”，描述：“了解更多关于我们公司的信息”，打开图：{ 标题：“关于我们”，描述：“了解更多关于我们公司的信息”，图片：['/og-image.jpg'], }, 推特：{ 卡：'summary_large_image'， }, } 导出默认函数 AboutPage() { 返回

关于我们

} **动态元数据：** // 应用程序/博客/[slug]/page.tsx 从“下一个”导入类型{元数据} 类型道具= { 参数：{ slug：字符串 } } 导出异步函数generateMetadata({ params }: Props): Promise { const post =等待 getPost(params.slug) 返回{ 标题：帖子标题，描述：帖子摘录，打开图：{ 标题：帖子标题，描述：帖子摘录，图片：[post.coverImage]，类型：'文章'，发布时间：post.publishedAt， }, } } 导出默认异步函数 BlogPost({ params }: Props) { const post =等待 getPost(params.slug) 返回<文章>{post.content} } **带有图标的元数据：** // 应用程序/layout.tsx 从“下一个”导入类型{元数据} 导出常量元数据：元数据 = { 标题：{ 默认值：“我的应用程序”，模板：'%s |我的应用程序', }, 描述：'我的应用程序描述'，图标：{ 图标：'/favicon.ico', 苹果：'/apple-icon.png'， }, 清单：'/manifest.json', } ### 图像优化 Next.js 使用 Image 组件自动优化图像。 **基本图片：** 从“下一个/图像”导入图像导出默认函数 Page() { 返回（ <图片 src="/个人资料.jpg" alt="个人资料图片" 宽度={500} 高度={500} /> ） } **远程图像：** // next.config.js 模块. 导出 = { 图片：{ 远程模式：[ { 协议：'https'，主机名：'images.unsplash.com'， }, ], }, } // 组件从“下一个/图像”导入图像导出默认函数 Page() { 返回（ <图片 src =“https://images.unsplash.com/photo-1234567890” alt="照片" 宽度={800} 高度={600} priority // 以高优先级加载图像 /> ） } **填充容器：** 从“下一个/图像”导入图像导出默认函数 Page() { 返回（

<图片 src="/背景.jpg" alt=“背景” 填充样式={{ objectFit: '覆盖' }} />

） } **响应式图像：** 从“下一个/图像”导入图像导出默认函数 Page() { 返回（ <图片 src="/英雄.jpg" alt=“英雄” 宽度={1920} 高度={1080} 尺寸=“（最大宽度：768px）100vw，（最大宽度：1200px）50vw，33vw” /> ） } ### 字体优化 Next.js 使用“next/font”自动优化字体。 **谷歌字体：** // 应用程序/layout.tsx 从“next/font/google”导入 {Inter, Roboto_Mono} 常量间 = 间({ 子集：['拉丁']，显示：'交换'， }) const RobotoMono = Roboto_Mono({ 子集：['拉丁']，显示：'交换'，变量：'--font-roboto-mono'， }) 导出默认函数 RootLayout({ Children }: { Children: React.ReactNode }) { 返回（ {孩子} ） } **本地字体：** // 应用程序/layout.tsx 从“next/font/local”导入 localFont const myFont = localFont({ src: './fonts/my-font.woff2', 显示：'交换'，变量：'--font-my-font'， }) 导出默认函数 RootLayout({ Children }: { Children: React.ReactNode }) { 返回（ {孩子} ） } ## 工作流程模式 ### 创建新页面 1. 在`app`目录中创建一个新文件夹 2. 添加 `page.tsx` 文件 3.导出默认组件 4. 有选择地添加布局、加载和错误文件 // 应用程序/产品/page.tsx 导出默认函数ProductsPage() { 返回

产品

} // 应用程序/产品/layout.tsx 导出默认函数 ProductsLayout({ Children }: { Children: React.ReactNode }) { 返回（

{孩子}

） } // 应用程序/产品/loading.tsx 导出默认函数 Loading() { return

正在加载产品...

} ### 服务器操作服务器操作允许您直接从客户端组件运行服务器端代码。 **带有服务器操作的表单：** // 应用程序/actions.ts '使用服务器' 从 'next/cache' 导入 { revalidatePath } 导出异步函数 createPost(formData: FormData) { const title = formData.get('title') 作为字符串 const content = formData.get('content') as string 等待 db.post.create({ 数据：{标题，内容} }) revalidatePath('/帖子') } // 应用程序/new-post/page.tsx 从 '../actions' 导入 { createPost } 导出默认函数 NewPostPage() { 返回（ <表单操作={createPost}>

<button type="submit">创建帖子</button>
        </形式>
      ）
    }

**使用 useTransition 的服务器操作：**
    
    
    // 应用程序/actions.ts
    '使用服务器'
    
    导出异步函数 updateUser(userId: string, data: UserData) {
      等待 db.user.update({
        其中：{ id: userId },
        数据，
      })
      返回 { 成功：真 }
    }
    
    // 应用程序/个人资料/page.tsx
    “使用客户端”
    
    从 'react' 导入 { useTransition }
    从 '../actions' 导入 { updateUser }
    
    导出默认函数 ProfilePage() {
      const [isPending, startTransition] = useTransition()
    
      const handleSubmit = (formData: FormData) => {
        开始转换（异步（）=> {
          等待 updateUser('用户 ID', {
            名称：formData.get('name') 作为字符串，
          })
        })
      }
    
      返回（
        <表单操作={handleSubmit}>
          <输入名称=“名称”/>
          <按钮已禁用={isPending}>
            {正在等待？ '保存...' : '保存'}
          </按钮>
        </形式>
      ）
    }

### 身份验证模式

**使用中间件进行基本身份验证：**
    
    
    // 库/auth.ts
    从“next/headers”导入 {cookies}
    从“下一步/导航”导入{重定向}
    
    导出异步函数 getSession() {
      const session = cookies().get('session')?.value
      if (!session) 返回 null
      返回等待验证会话（会话）
    }
    
    导出异步函数 requireAuth() {
      const 会话 = 等待 getSession()
      如果（！会话）{
        重定向（'/登录'）
      }
      返回会话
    }
    
    // 应用程序/仪表板/page.tsx
    从 '@/lib/auth' 导入 { requireAuth }
    
    导出默认异步函数 DashboardPage() {
      const 会话 = 等待 requireAuth()
    
      返回（
        <div>
          <h1>欢迎，{session.user.name}</h1>
        </div>
      ）
    }
    
    // 应用程序/api/login/route.ts
    从“next/headers”导入 {cookies}
    
    导出异步函数 POST(request: Request) {
      const { 电子邮件、密码 } = 等待 request.json()
    
      const user =等待validateCredentials（电子邮件，密码）
    
      如果（！用户）{
        return Response.json({ error: '无效凭证' }, { status: 401 })
      }
    
      const 会话 = 等待 createSession(用户)
      cookies().set('会话', 会话, {
        httpOnly：正确，
        安全：process.env.NODE_ENV === '生产'，
        maxAge: 60 * 60 * 24 * 7, // 1周
      })
    
      返回 Response.json({ 成功: true })
    }

### 数据库模式

**Prisma 与服务器组件：**
    
    
    // 库/db.ts
    从 '@prisma/client' 导入 { PrismaClient }
    
    const globalForPrisma = 全局未知为 { prisma: PrismaClient }
    
    导出 const prisma = globalForPrisma.prisma ||新的 PrismaClient()
    
    if (process.env.NODE_ENV !== '生产') globalForPrisma.prisma = prisma
    
    // 应用程序/帖子/page.tsx
    从 '@/lib/db' 导入 { prisma }
    
    异步函数 getPosts() {
      返回等待 prisma.post.findMany({
        orderBy: { createAt: 'desc' },
        包括：{作者：true}，
      })
    }
    
    导出默认异步函数 PostsPage() {
      const posts = 等待 getPosts()
    
      返回（
        <div>
          {posts.map((post) => (
            <文章键={post.id}>
              <h2>{帖子.标题}</h2>
              <p>作者：{post.author.name}</p>
              <p>{帖子内容}</p>
            </文章>
          ))}
        </div>
      ）
    }

### 缓存策略

**按需重新验证：**
    
    
    // 应用程序/actions.ts
    '使用服务器'
    
    从 'next/cache' 导入 { revalidatePath, revalidateTag }
    
    导出异步函数 createPost(data: PostData) {
      等待 db.post.create({ 数据 })
    
      // 重新验证特定路径
      revalidatePath('/帖子')
    
      // 或者通过标签重新验证
      revalidateTag('帖子')
    }
    
    // 使用缓存标签获取
    异步函数 getPosts() {
      const res = 等待 fetch('https://api.example.com/posts', {
        下一个：{标签：['帖子']}
      })
      返回 res.json()
    }

**基于时间的重新验证：**
    
    
    异步函数 getData() {
      const res = 等待 fetch('https://api.example.com/data', {
        next: { revalidate: 3600 } // 每小时重新验证
      })
      返回 res.json()
    }

**路由段配置：**
    
    
    // 应用程序/博客/page.tsx
    export const revalidate = 3600 // 每小时重新验证
    export const dynamic = 'force-static' // 强制静态生成
    export const fetchCache = 'force-cache' // 为所有获取请求强制缓存
    
    导出默认异步函数 BlogPage() {
      const posts = 等待 getPosts()
      返回 <div>{/* ... */}</div>
    }

## 最佳实践

### 1\.默认使用服务器组件

服务器组件是默认组件，可提供更好的性能。仅在需要时使用客户端组件。
    
    
    // ✅ 好 - 服务器组件
    异步函数 getData() {
      const res = 等待 fetch('https://api.example.com/data')
      返回 res.json()
    }
    
    导出默认异步函数 Page() {
      常量数据 = 等待 getData()
      返回<div>{data.title}</div>
    }
    
    // ✅ 好 - 仅在需要时使用客户端组件
    “使用客户端”
    
    从 'react' 导入 { useState }
    
    导出默认函数 Counter() {
      const [计数，setCount] = useState(0)
      返回 <button onClick={() => setCount(count + 1)}>{count}</button>
    }

### 2\.在您需要的地方获取数据

不要支持钻取数据。在需要它的组件中获取数据。
    
    
    // ✅ 好 - 在需要的地方获取
    异步函数 Header() {
      const 用户 = 等待 getUser()
      return <div>欢迎，{user.name}</div>
    }
    
    异步函数 Posts() {
      const posts = 等待 getPosts()
      return <div>{/* 渲染帖子 */}</div>
    }
    
    导出默认函数 Page() {
      返回（
        <>
          <标题/>
          <帖子/>
        </>
      ）
    }

### 3\.使用并行数据获取

尽可能并行获取数据以减少加载时间。
    
    
    // ✅ 好 - 并行获取
    导出默认异步函数 Page() {
      const [用户，帖子] =等待 Promise.all([
        获取用户(),
        获取帖子()
      ]）
    
      返回 <div>{/* ... */}</div>
    }

### 4\.优化图像

始终使用图像组件进行自动优化。
    
    
    // ✅ 好
    从“下一个/图像”导入图像
    
    <图片
      src="/英雄.jpg"
      alt=“英雄”
      宽度={1920}
      高度={1080}
      优先级
    />
    
    // ❌ 不好
    <img src="/hero.jpg" alt="英雄" />

### 5\.使用元数据 API 进行 SEO

为每个页面定义元数据。
    
    
    // ✅ 好
    导出常量元数据 = {
      标题：“我的页面”，
      description: '页面描述',
    }
    
    导出默认函数 Page() {
      返回<div>内容</div>
    }

### 6\.实施错误边界

添加 error.tsx 文件以进行错误处理。
    
    
    // 应用程序/error.tsx
    “使用客户端”
    
    导出默认函数 Error({ error, reset }: { error: Error, Reset: () => void }) {
      返回（
        <div>
          <h2>出了点问题！</h2>
          <button onClick={reset}>重试</button>
        </div>
      ）
    }

### 7\.使用加载状态

添加用于加载UI的loading.tsx文件。
    
    
    // 应用程序/loading.tsx
    导出默认函数 Loading() {
      返回<div>正在加载...</div>
    }

### 8\.为 API 实现路由处理程序

在页面目录中使用路由处理程序而不是 API 路由。
    
    
    // ✅ 好 - app/api/users/route.ts
    导出异步函数 GET(请求: 请求) {
      const users =等待db.user.findMany()
      返回 Response.json(用户)
    }

### 9\.使用中间件实现通用逻辑

在中间件中实现身份验证、重定向和重写。
    
    
    // 中间件.ts
    导出函数中间件（请求：NextRequest）{
      const token = request.cookies.get('token')
    
      如果（！令牌）{
        返回 NextResponse.redirect(new URL('/login', request.url))
      }
    
      返回 NextResponse.next()
    }

### 10\.优化字体

使用 next/font 进行自动字体优化。
    
    
    // ✅ 好
    从“next/font/google”导入 {Inter}
    
    const inter = Inter({ 子集: ['拉丁'] })
    
    导出默认函数 RootLayout({ Children }) {
      返回（
        <html className={inter.className}>
          <body>{孩子}</body>
        </html>
      ）
    }

## 常见模式

### 博客模式
    
    
    // 应用程序/博客/page.tsx
    从“下一个/链接”导入链接
    
    异步函数 getPosts() {
      const res = 等待 fetch('https://api.example.com/posts', {
        下一个：{重新验证：3600}
      })
      返回 res.json()
    }
    
    导出默认异步函数 BlogPage() {
      const posts = 等待 getPosts()
    
      返回（
        <div>
          <h1>博客</h1>
          {posts.map((post) => (
            <文章键={post.id}>
              <h2>
                <Link href={`/blog/${post.slug}`}>{post.title}</Link>
              </h2>
              <p>{帖子摘录}</p>
            </文章>
          ))}
        </div>
      ）
    }
    
    // 应用程序/博客/[slug]/page.tsx
    从 'next/navigation' 导入 { notFound }
    
    异步函数 getPost(slug: string) {
      const res = 等待 fetch(`https://api.example.com/posts/${slug}`)
      if (!res.ok) 返回 null
      返回 res.json()
    }
    
    导出异步函数generateStaticParams() {
      const posts = wait fetch('https://api.example.com/posts').then(r => r.json())
      返回 posts.map((post) => ({ slug: post.slug }))
    }
    
    导出异步函数generateMetadata({ params }: { params: { slug: string } }) {
      const post =等待 getPost(params.slug)
      if (!post) 返回 {}
    
      返回{
        标题：帖子标题，
        描述：帖子摘录，
      }
    }
    
    导出默认异步函数 BlogPostPage({ params }: { params: { slug: string } }) {
      const post =等待 getPost(params.slug)
    
      如果（！post）{
        未找到（）
      }
    
      返回（
        <文章>
          <h1>{帖子.标题}</h1>
          <divangerlySetInnerHTML={{ __html: post.content }} />
        </文章>
      ）
    }

### 电商模式
    
    
    // 应用程序/产品/page.tsx
    从 'react' 导入 { Suspense }
    从 './ProductGrid' 导入 ProductGrid
    从“./Filters”导入过滤器
    
    导出默认函数ProductsPage({
      搜索参数，
    }：{
      searchParams: { 类别？: 字符串;排序？：字符串 }
    }) {
      返回（
        <div>
          <h1>产品</h1>
          <过滤器/>
          <Suspense Fallback={<div>正在加载产品...</div>}>
            <ProductGrid searchParams={searchParams} />
          </悬念>
        </div>
      ）
    }
    
    // 应用程序/产品/ProductGrid.tsx
    异步函数 getProducts(category?: string, sort?: string) {
      const params = new URLSearchParams()
      if (类别) params.set('类别', 类别)
      if (排序) params.set('排序', 排序)
    
      const res = 等待 fetch(`https://api.example.com/products?${params}`, {
        下一个：{重新验证：300}
      })
      返回 res.json()
    }
    
    导出默认异步函数 ProductGrid({
      搜索参数，
    }：{
      searchParams: { 类别？: 字符串;排序？：字符串 }
    }) {
      const products = wait getProducts(searchParams.category, searchParams.sort)
    
      返回（
        <div className="网格">
          {产品.map((产品) => (
            <ProductCard key={product.id} 产品={product} />
          ))}
        </div>
      ）
    }
    
    // 应用程序/产品/[id]/page.tsx
    异步函数 getProduct(id: string) {
      const res = 等待 fetch(`https://api.example.com/products/${id}`)
      返回 res.json()
    }
    
    导出默认异步函数 ProductPage({ params }: { params: { id: string } }) {
      const 产品 = 等待 getProduct(params.id)
    
      返回（
        <div>
          <h1>{产品名称}</h1>
          <p>{产品.描述}</p>
          <p>${产品.价格}</p>
          <AddToCartButtonproductId={product.id} />
        </div>
      ）
    }

### 仪表板模式
    
    
    // 应用程序/仪表板/layout.tsx
    从 '@/lib/auth' 导入 { requireAuth }
    从“./Sidebar”导入侧边栏
    
    导出默认异步函数 DashboardLayout({
      孩子们，
    }：{
      子级：React.ReactNode
    }) {
      const 会话 = 等待 requireAuth()
    
      返回（
        <div className="仪表板">
          <侧边栏用户={session.user} />
          <主>{子}</主>
        </div>
      ）
    }
    
    // 应用程序/仪表板/page.tsx
    从 'react' 导入 { Suspense }
    从“./Stats”导入统计信息
    从'./RecentActivity'导入RecentActivity
    从“./Chart”导入图表
    
    导出默认函数 DashboardPage() {
      返回（
        <div>
          <h1>仪表板</h1>
    
          <Suspense Fallback={<div>正在加载统计信息...</div>}>
            <统计数据/>
          </悬念>
    
          <div className="网格">
            <Suspense Fallback={<div>加载图表...</div>}>
              <图表/>
            </悬念>
    
            <Suspense Fallback={<div>正在加载活动...</div>}>
              <最近活动/>
            </悬念>
          </div>
        </div>
      ）
    }

## 总结

此 Next.js 开发技能涵盖：

1. **App Router**：基于文件系统的现代路由
  2. **服务器组件**：默认服务器端渲染以获得更好的性能
  3. **数据获取**：具有缓存和重新验证功能的扩展获取 API
  4. **路由**：动态路由、包罗万象的路由、路由组、并行路由
  5. **布局**：嵌套布局、模板和布局组合
  6. **Loading States** ：带有Suspense的自动加载UI
  7. **错误处理**：错误边界和未找到的页面
  8. **API 路由**：使用 Web API 的路由处理程序
  9. **中间件**：请求拦截和修改
  10. **元数据**：使用元数据 API 进行 SEO 优化
  11. **图像优化**：使用图像组件自动图像优化
  12. **字体优化**：使用next/font自动加载字体
  13. **服务器操作**：来自客户端组件的服务器端突变
  14. **身份验证**：会话管理和受保护的路由
  15. **最佳实践**：性能优化、缓存策略和常见模式

所有模式均基于官方 Next.js 文档（信任评分：10）并代表现代 Next.js 13+ App Router 开发实践。</article></body></html>

Nextjs开发

包含技能