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

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《Nextjs 中的路由 – 如何在您的下一个应用程序中使用 App Router》，聊聊，我们一起来看看吧！

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/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 的所有功能。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。