一文带你了解 Next Route理论到实战

最新推荐文章于 2025-06-21 20:42:35 发布

程序员海军

最新推荐文章于 2025-06-21 20:42:35 发布

阅读量970

点赞数 29

CC 4.0 BY-SA版权

分类专栏： Next从0到1实战文章标签： Next react 前端 route

本文链接：https://blog.youkuaiyun.com/HaiJun_Aion/article/details/145451795

Next.js通过pages目录中的文件结构自动创建路由。例如，如果你在pages目录下创建了about.js，那么Next.js会自动将/about这个URL路由到这个文件对应的组件。

Next.js支持通过文件名来创建动态路由。如果一个页面的文件名用方括号括起来，如[param].js，则表示这部分的URL是动态的，可以匹配任何值，并且这个值可以在页面组件内部通过useRouter钩子或getServerSideProps、getStaticProps等函数作为参数获取。

在有层级结构的页面中，可以通过创建嵌套文件夹来实现。例如，你想要创建一个/products/shoes的路由，你可以在pages目录下创建一个叫products的文件夹，然后在该文件夹中创建shoes.js文件。

在Next.js中，可以使用Link组件来创建客户端的路由跳转，这样可以实现页面的无刷新加载。Link组件避免了浏览器默认的全页刷新行为。

Next.js支持两种预渲染形式—静态生成和服务器渲染。使用静态生成的页面在构建时生成并可重复使用，在服务器渲染中，每个请求都会渲染页面。

Next.js自动提供了一个404错误页面，当路由不匹配任何页面或文件时显示。开发者也可以自定义404页面，以匹配网站的整体风格。

Next.js支持中间件，可以用来处理请求并在继续路由处理前运行一些代码，比如验证用户身份或日志记录。

在Next.js的新版本中（从13版开始），引入了名为app的新目录。这个目录是为了容纳Next.js引入的新特性，如App Router，它支持共享布局、嵌套路由、加载状态和错误处理等。

pages目录是Next.js中传统的路由机制，每个文件对应一个路由。系统会根据文件结构自动创建路由。例如，pages/about.js会对应/about这个URL路径。

页面是通过创建page.js 来实现UI视图，例如你想创建一个这样的访问URL http://localhost:3000/person 访问，那么需要再app文件夹目录下新建文件夹person,然后在创建page.tsx 即可。

注意

布局是在多个路由之间共享的 UI。在导航时，布局会保留状态，保持交互性，并且不会重新呈现。布局也可以嵌套.

根布局在app目录并应用于所有路由。此布局是必需的，并且必须包含html和body标记，允许您修改从服务器返回的初始 HTML。

import type {
   
    Metadata } from "next";
import {
   
    Inter } from "next/font/google";
import "./globals.css";

const inter

200万优质内容无限畅学