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 id="My-App">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

Java vs JavaScript：开发人员的详细比较May 16, 2025 am 12:01 AM

javaandjavascriptaredistinctlanguages：javaisusedforenterpriseandmobileapps，while javascriptifforInteractiveWebpages.1）JavaisComcompoppored，statieldinglationallyTypted，statilly tater astrunsonjvm.2）

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。