首页 >web前端 >js教程 >Next.js 中的路由 – 如何在您的下一个应用程序中使用 App Router

Next.js 中的路由 – 如何在您的下一个应用程序中使用 App Router

Susan Sarandon原创: 2025-01-17 04:33:12859浏览

Routing in Next.js – How to Use App Router in Your Next Apps

Next.js 14 的 App Router 凭借 app/ 目录中基于文件的路由系统彻底改变了路由管理。这种方法可以促进更好的应用程序结构、模块化和性能。本指南概述了 Next.js 项目中有效的 App Router 实施。

了解应用路由器

App Router 重新定义了路由定义。目录结构直接映射到 URL 路径。 /app 中的文件夹成为路由，简化了嵌套布局、路由分组和数据获取，尤其是在大型应用程序中。

设置应用路由器

创建 Next.js 项目（如果需要）：npx create-next-app@latest
App Router 在 Next.js 14 中默认通过 /app 目录启用。无需额外配置。

基本路由

/app内的文件和文件夹自动映射到路线：

<code>app/
 ├── page.tsx           # Homepage ("/")
 ├── about/
 │    └── page.tsx      # About page ("/about")
 └── blog/
      ├── page.tsx      # Blog index ("/blog")
      └── [slug]/
           └── page.tsx # Dynamic blog posts ("/blog/[slug]")</code>

静态路线： app/about/page.tsx 映射到 /about。
动态路由：方括号 ([]) 定义动态段。 app/blog/[slug]/page.tsx 处理类似 /blog/my-post.

布局和嵌套

App Router 简化了布局创建和重用。

创建布局：

文件夹中的 layout.tsx 文件适用于该文件夹中的所有页面和组件。

<code>app/
 ├── layout.tsx         # App-wide layout
 ├── about/
 │    ├── layout.tsx    # About page layout
 │    └── page.tsx      # About page content</code>

<code class="language-javascript">// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <h1>My App</h1>
        {children}
      </body>
    </html>
  );
}</code>

嵌套路由和布局：

布局嵌套，在嵌套路由之间提供一致的 UI。

<code>app/
 ├── dashboard/
 │    ├── layout.tsx         # Dashboard layout
 │    ├── page.tsx           # Dashboard home ("/dashboard")
 │    └── settings/
 │         └── page.tsx      # Dashboard settings ("/dashboard/settings")</code>

/dashboard/ 布局适用于 /dashboard 和 /dashboard/settings。

路线组

路由组使用带括号的文件夹来组织代码，而无需更改 URL。

<code>app/
 ├── (dashboard)/
 │    ├── profile/
 │    │     └── page.tsx     # "/profile"
 │    ├── settings/
 │    │     └── page.tsx     # "/settings"</code>

/profile 和 /settings 分组在 (dashboard) 下以进行代码组织。

捕获所有路线

处理文件名中带有 ... 的多个 URL 片段：[...]/page.tsx 捕获 /blog/a/b/c.

错误和加载状态

Next.js 14 使用 error.tsx 和 loading.tsx 进行错误处理和加载路由内的指示器。

数据获取

使用 async/await 或钩子直接在组件中获取服务器端数据。

<code class="language-javascript">// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());
  return <div>{JSON.stringify(data)}</div>;
}</code>

服务器操作

使用服务器操作处理组件内的服务器端逻辑（例如表单提交）。

部署

部署 App Router 应用程序与标准 Next.js 部署相同。强烈建议使用 Vercel 以获得最佳性能。

Next.js 14 App Router 提供了一种灵活的模块化方法，可以使用更简洁的代码构建可扩展的高性能应用程序。本指南为在项目中利用其功能奠定了基础。

以上是Next.js 中的路由 – 如何在您的下一个应用程序中使用 App Router的详细内容。更多信息请关注PHP中文网其他相关文章！

Static define if for catch Directory Error using map JS default this ui router Foundation

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Setting up Vite with TypeScript for a Simple To-Do List下一篇：The Perfect React-TypeScript Starter Template for your Vite projects

查看更多