Next.js 14 的 App Router 引入了一种基于文件的路由方法，让开发者构建更结构化、模块化且高性能的应用。本文将指导您如何在 Next.js 应用中有效使用 App Router。
什么是 App Router？
App Router 提供了一种全新的路由定义方式。只需创建组件即可定义路由，/app 目录下的每个文件夹都对应一个 URL 路径。这种组织方式支持嵌套布局和分组路由，在处理大型应用时更易于数据获取和路由管理。
设置 App Router
创建新的 Next.js 项目 (若尚未创建): npx create-next-app@latest启用 App Router: Next.js 14 默认使用 /app 目录，自动启用 App Router，无需额外配置。
基本路由
/app 目录下的每个文件夹和文件都自动映射到应用中的路径。
app/ ├── page.tsx # 首页 (例如： "/") ├── about/ │ └── page.tsx # 关于页面 (例如： "/about") └── blog/ ├── page.tsx # 博客索引页 (例如： "/blog") └── [slug]/ └── page.tsx # 动态博客文章 (例如： "/blog/my-post")
静态路由: app/about/page.tsx 自动映射到 /about 路径。动态路由: 使用方括号 [] 创建动态路由。例如，app/blog/[slug]/page.tsx 将动态渲染 /blog/my-first-post 或 /blog/hello-world 等路径的页面。
布局和嵌套
App Router 允许您在一个位置定义布局并在不同页面中复用，轻松实现应用各个部分的 UI 元素一致性。
创建布局:
在文件夹中添加 layout.tsx 文件即可创建布局。该布局将应用于该文件夹内的所有页面和组件。
app/ ├── layout.tsx # 应用根布局 ├── about/ │ ├── layout.tsx # 关于页面特定布局 │ └── page.tsx # 关于页面内容
// app/layout.tsxexport default function RootLayout({ children }) { return ( 我的应用 {children} );}
嵌套路由和布局:
每个布局文件都适用于其文件夹及其任何嵌套文件夹，从而支持一致布局的嵌套路由结构。
app/ ├── dashboard/ │ ├── layout.tsx # 仪表盘区域布局 │ ├── page.tsx # 仪表盘首页 ("/dashboard") │ └── settings/ │ └── page.tsx # 仪表盘设置 ("/dashboard/settings")
仪表盘布局: /dashboard 内的 layout.tsx 文件适用于 /dashboard 和 /dashboard/settings。
路由组
路由组允许通过在括号中添加组文件夹来组织路由，而不影响 URL 结构。这对于构建应用代码而不影响 URL 非常有用。
app/ ├── (dashboard)/ │ ├── profile/ │ │ └── page.tsx # "/profile" │ ├── settings/ │ │ └── page.tsx # "/settings"
/profile 和 /settings 的文件夹配置文件和设置将显示，但 (dashboard) 将它们直观地分组以实现代码结构。
通配符路由
当您需要在一个路由文件中处理多个 URL 段时，可以使用通配符路由。这通过在文件名中使用 ... 来实现。
示例: [...]slug].tsx 捕获多个路径段，例如 /blog/a/b/c。
错误和加载状态处理
Next.js 14 允许您使用每个路由中的特殊组件来管理错误和加载状态。
错误边界:
在文件夹中添加 error.tsx 来处理路由中的错误。
app/ ├── blog/ │ ├── error.tsx # 博客页面的错误边界 │ └── page.tsx # 博客主页
加载状态: 使用 loading.tsx 显示特定路由的加载指示器。
App Router 中的数据获取
使用 Next.js 14，您可以使用 use hook 或 async/await 直接在组件中获取服务器端数据。
// app/dashboard/page.tsxasync function getData() { const res = await fetch('https://api.example.com/data'); return res.json();}export default async function DashboardPage() { const data = await getData(); return {JSON.stringify(data)};}
服务器操作
服务器操作允许您直接在组件代码中处理服务器端逻辑，例如处理表单提交。
// app/contact/page.tsx"use client";import { useForm } from 'react-hook-form';export default function ContactForm() { const { register, handleSubmit } = useForm(); const onSubmit = async (data) => { "use server"; await fetch('/api/contact', { method: 'POST', body: JSON.stringify(data) }); }; return ( {/* ...表单内容... */} );}
部署 App Router
使用 App Router 部署应用与任何 Next.js 应用相同。Vercel 等平台针对 Next.js 应用进行了优化，提供最佳性能和集成。
部署流程：
为 API 密钥或其他敏感数据配置环境变量。使用以下命令构建并导出项目：npm run build部署到 Vercel：使用 Vercel CLI 或连接您的仓库实现无缝部署。
Next.js 14 的 App Router 灵活且模块化，使用更简洁的代码构建可扩展且快速的应用。 通过以上方法，您能够充分利用 App Router 的所有功能。
以上就是Nextjs 中的路由 – 如何在您的下一个应用程序中使用 App Router的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1500748.html
微信扫一扫 
支付宝扫一扫 
