next.js 以其强大的功能和直观的设计彻底改变了 react 开发。随着 next.js 13 的发布，新的 app router 占据了中心舞台，为开发人员提供了更灵活、更强大的方式来构建应用程序。在这份综合指南中，我们将深入研究 app router，探索其功能和最佳实践。为了说明这些概念，我们将使用一个真实的示例：求职信生成器项目。
了解应用程序路由器
next.js 13 中的 app router 代表了我们在 react 应用程序中处理路由方式的范式转变。与之前的 pages router 不同，app router 使用基于文件系统的方法，该方法更符合我们对应用程序结构进行心理建模的方式。
应用路由器的主要优点：
- 直观的基于文件的路由：路由由应用程序目录中的文件结构定义。
- 改进的性能：对 react 服务器组件的内置支持。
- 增强灵活性：更轻松地实现布局、嵌套路由等。
- 内置优化：自动代码分割和预取。
应用路由器入门
让我们首先使用 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 (
{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 (
{children}
);
}
实际应用：求职信生成器
现在我们已经介绍了基础知识，让我们看看如何将这些概念应用到实际项目中。 github 上的 resumate-nextjs 项目是使用 next.js 构建的求职信生成器的绝佳示例。
该项目的要点：
结构化路由：该项目使用清晰的路由结构，分离不同页面和组件之间的关注点。
服务器端渲染：利用 next.js 的 ssr 功能来提高性能和 seo。
api 路由：为服务器端逻辑实现 api 路由，演示如何处理表单提交和数据处理。
样式：使用 tailwind css 进行响应式且简洁的 ui 设计。
状态管理：实现上下文 api 以管理跨组件的应用程序状态。
先进理念
当您对 app router 越来越熟悉时，请探索这些高级概念：
- 并行路由：以同一布局渲染多个页面。
- 拦截路由：针对特定场景自定义路由行为。
- 路由处理程序：在 app router 结构中创建 api 端点。
- 中间件：将自定义服务器端逻辑添加到您的路由中。
最佳实践和技巧
- 利用服务器组件：使用它们进行数据获取和繁重计算。
- 优化图片：使用next.js image组件进行自动优化。
- 实施渐进增强：确保您的应用程序无需 javascript 即可运行，以获得更好的可访问性。
- 使用 typescript：提高开发者体验和代码质量。
- 定期更新：保持 next.js 版本更新，以便从最新功能和优化中受益。
结论
next.js 13 app router 代表了 react 应用程序开发向前迈出的重要一步。通过提供直观的、基于文件系统的路由系统并利用 react server components 的强大功能，它使开发人员能够构建高性能、可扩展且可维护的 web 应用程序。
正如求职信生成器示例所示，app router 简化了创建复杂、动态 web 应用程序的过程。无论您是构建简单的作品集网站还是复杂的 web 应用程序，掌握 app router 都将显着增强您的 next.js 开发体验。
记住，最好的学习方法就是实践。克隆 resumate-nextjs 存储库，试验代码，并尝试使用 app router 实现您自己的功能。快乐编码！
