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

首页

web前端

js教程

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

Susan Sarandon

Jan 17, 2025 am 04:33 AM

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>

登录后复制

// app/layout.tsx
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <h1>My App</h1>
        {children}
      </body>
    </html>
  );
}

登录后复制

嵌套路由和布局：

布局嵌套，在嵌套路由之间提供一致的 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 或钩子直接在组件中获取服务器端数据。

// 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>;
}

登录后复制

服务器操作

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

部署

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

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

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

本站声明

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

热AI工具

热工具

热门话题

Java教程

1677

CakePHP 教程

1430

Laravel 教程

1333

PHP教程

1278

C# 教程

1257

显示更多

Related knowledge

Python vs. JavaScript：学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

JavaScript和Web：核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在行动中：现实世界中的示例和项目 Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

了解JavaScript引擎：实施详细信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：开发环境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

C/C在JavaScript口译员和编译器中的作用 Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。

Python vs. JavaScript：比较用例和应用程序 Apr 21, 2025 am 12:01 AM

Python更适合数据科学和自动化，JavaScript更适合前端和全栈开发。1.Python在数据科学和机器学习中表现出色，使用NumPy、Pandas等库进行数据处理和建模。2.Python在自动化和脚本编写方面简洁高效。3.JavaScript在前端开发中不可或缺，用于构建动态网页和单页面应用。4.JavaScript通过Node.js在后端开发中发挥作用，支持全栈开发。

从网站到应用程序：JavaScript的不同应用 Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题