Nextjs App Router：包含真实示例的综合指南

nextjs app router：包含真实示例的综合指南

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 <h1>welcome to the cover letter generator</h1>;
}

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

export default function coverletter() {
  return <h1>create your cover letter</h1>;
}

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

布局和嵌套路由

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

在 app/layout.tsx 中：

export default function rootlayout({
  children,
}: {
  children: react.reactnode
}) {
  return (
    
      
        <nav><a href="/">home</a>
          <a href="/cover-letter">create cover letter</a>
          <a href="/templates">templates</a>
        </nav>
        {children}
      
    
  );
}

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

动态路线

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

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

export default function template({ params }: { params: { id: string } }) {
  return <h1>template {params.id}</h1>;
}

现在，导航到 /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 (
    <div>
      <h1>create your cover letter</h1>
      <ul>
        {templates.map(template => (
          <li key="{template.id}">{template.name}</li>
        ))}
      </ul>
</div>
  );
}

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

链接和导航

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

import Link from 'next/link';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        <nav><link href="/">Home
          <link href="/cover-letter">Create Cover Letter
          <link href="/templates">Templates
        </nav>
        {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 实现您自己的功能。快乐编码！

以上就是Nextjs App Router：包含真实示例的综合指南的详细内容，更多请关注其它相关文章！