Next.js 应用程序路由器：带有实际示例的综合指南

发布于2024-11-01

Next.js App Router: A Comprehensive Guide with Real-World Example

Next.js 以其强大的功能和直观的设计彻底改变了 React 开发。随着 Next.js 13 的发布，新的 App Router 占据了中心舞台，为开发人员提供了更灵活、更强大的方式来构建应用程序。在这份综合指南中，我们将深入研究 App Router，探索其功能和最佳实践。为了说明这些概念，我们将使用一个真实的示例：求职信生成器项目。

了解应用程序路由器

Next.js 13 中的 App Router 代表了我们在 React 应用程序中处理路由方式的范式转变。与之前的 Pages Router 不同，App Router 使用基于文件系统的方法，该方法更符合我们在心理上建模应用程序结构的方式。

应用路由器的主要优点：

直观的基于文件的路由：路由由应用程序目录中的文件结构定义。
改进的性能：对 React Server 组件的内置支持。
增强灵活性：更轻松地实现布局、嵌套路由等。
内置优化：自动代码分割和预取。

应用路由器入门

让我们首先使用 App Router 设置一个新的 Next.js 13 项目。打开终端并运行：

npx create-next-app@latest my-app
cd my-app

出现提示时，请务必为“您想使用 App Router 吗？”选择“是”。

使用 App Router 进行基本路由

在App Router中，每个文件夹代表一个路由段。让我们为求职信生成器创建一个简单的结构：

app/
├── page.tsx
├── layout.tsx
├── cover-letter/
│   └── page.tsx
└── templates/
    └── page.tsx

这里，根应用程序文件夹中的page.tsx代表主页。求职信和模板文件夹为相应页面创建路线。

在 app/page.tsx 中：

export default function Home() {
  return Welcome to the Cover Letter Generator;
}

在 app/cover-letter/page.tsx 中：

export default function CoverLetter() {
  return Create Your Cover Letter;
}

通过此结构，您可以导航到 / 获取主页，导航到 /cover-letter 获取求职信创建页面。

布局和嵌套路由

App Router 的强大功能之一是能够创建嵌套布局。让我们为我们的应用程序添加一个通用布局。

在 app/layout.tsx 中：

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
          Home
          Create Cover Letter
          Templates
        
        {children}
      
    
  );
}

此布局将应用于我们应用程序中的所有页面，提供一致的导航结构。

动态路线

动态路由对于基于参数生成内容的应用程序至关重要。让我们实现一个动态路由来查看特定的求职信模板。

创建一个新文件：app/templates/[id]/page.tsx:

export default function Template({ params }: { params: { id: string } }) {
  return Template {params.id};
}

现在，导航到 /templates/1 或 /templates/formal 将使用相应的 id 渲染此组件。

服务器组件和数据获取

Next.js 13 引入了 React Server 组件，允许我们在服务器上获取数据。让我们在求职信生成器中实现这一点。

在 app/cover-letter/page.tsx 中：

async function getTemplates() {
  // Simulate API call
  return [
    { id: 1, name: 'Professional' },
    { id: 2, name: 'Creative' },
    { id: 3, name: 'Academic' },
  ];
}

export default async function CoverLetter() {
  const templates = await getTemplates();

  return (
    
      Create Your Cover Letter
      
        {templates.map(template => (
          {template.name}
        ))}
      
    
  );
}

该组件在服务器上获取数据，提高性能和 SEO。

链接和导航

对于客户端导航，请使用 Next.js 中的 Link 组件。更新您的 app/layout.tsx:

import Link from 'next/link';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        
          Home
          Create Cover Letter
          Templates
        
        {children}
      
    
  );
}