Jacky's blog
Jacky
2023-08-16
目录

nextjs

# 介绍

Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations.

在底层, Next.js 还抽象并自动配置了 React 所需的工具, 如打包、编译等。这使你可以专注于构建应用程序, 而不必花费时间进行配置 无论你是个人开发者还是大团队的一部分, Next.js 都可以帮助你构建交互式、动态和高性能的 React 应用程序

主要特点和功能

  • 服务器渲染(SSR)和静态导出: Next.js 支持服务器渲染, 这意味着在首次加载页面时, 服务器会生成 HTML 内容, 提高了页面的加载速度和 SEO 可访问性。同时, 它还支持静态导出, 可以在构建时预渲染页面, 从而减少运行时的服务器负载

  • 热模块替换(HMR): 开发过程中, Next.js 提供了热模块替换, 使你可以在不刷新整个页面的情况下实时更新修改, 极大地提高了开发效率

  • 动态路由: Next.js 支持创建动态路由, 允许你使用占位符在 URL 中创建可变部分, 这对于构建类似博客、商品详情等需要根据数据动态生成页面的应用非常有用

  • 自动代码分割: Next.js 会自动将页面和组件代码分割成小块, 只加载当前页面所需的部分, 从而优化加载性能

  • 数据获取: Next.js 提供了多种数据获取的方式, 包括静态生成(在构建时获取数据)、服务器渲染(在每次请求时获取数据)和客户端渲染。你可以选择最适合你应用需求的数据获取策略

  • 内置 CSS 和样式支持: Next.js 内置了 CSS 模块、Sass、Less 等样式预处理器的支持, 让你可以更方便地管理应用的样式

  • 插件和扩展性: Next.js 的插件生态丰富, 你可以通过插件轻松集成各种功能, 如国际化、状态管理等

  • TypeScript 支持: Next.js 对 TypeScript 有良好的支持, 可以帮助你构建类型安全的应用

总之, Next.js 提供了一种现代化的前端开发方式, 帮助开发者更高效地构建高性能、可维护的 Web 应用。它的灵活性和功能丰富使其成为许多开发团队在构建 Web 应用时的首选框架之一

# Get start

https://nextjs.org/docs/getting-started/react-essentials (opens new window)

# App Router vs Pages Router

https://nextjs.org/docs#app-router-vs-pages-router (opens new window)

Next.js 有两种不同的路由器: 应用程序路由器(App Router)和页面路由器(Pages Router)。应用程序路由器是一种较新的路由器, 它允许你使用 React 的最新功能, 如服务器组件(Server Components)和流式传输(Streaming)。页面路由器是原始的 Next.js 路由器, 允许你构建服务器渲染的 React 应用程序, 并继续支持较旧版本的 Next.js 应用

这两者在应用程序的不同层次上发挥作用, 让我们来详细了解它们的区别和用途

  1. 应用程序路由(App Router):

应用程序路由是指整个 Next.js 应用程序的导航结构。这包括在不同页面之间进行导航, 通常是通过顶部的导航栏、菜单、按钮等。应用程序路由管理着整个应用的页面切换和导航

Next.js 使用 Link 组件来实现应用程序级别的路由。这个组件可以在你的应用中实现无需重新加载整个页面的导航。它通过预加载所需的页面数据并使用浏览器的历史记录 API 来实现快速、平滑的导航

  1. 页面路由(Pages Router):

页面路由是指每个单独页面的路由。在 Next.js 中, 每个页面都是一个独立的模块, 拥有自己的路由规则。页面路由负责确定哪个组件将渲染在特定的 URL 上

每个页面在 Next.js 中对应一个位于 pages 文件夹中的文件。这个文件的名称就是对应页面的 URL 路径, 例如 pages/index.js 对应根路径, pages/about.js 对应 /about 路径。这种方式让页面的路由非常简单和直观

总结来说, 应用程序路由用于管理整个应用程序的导航结构, 而页面路由用于决定每个单独页面的 URL 路径和对应的组件。这两者协同工作, 帮助你构建一个流畅的单页应用, 同时还保留了传统多页面应用的优势

# Server and Client Components

为什么要使用服务器组件？

为什么要使用服务器组件？相比客户端组件, 它们有什么优势呢？

服务器组件允许开发者更好地利用服务器基础设施。例如, 你可以将数据获取移至服务器, 更接近数据库, 并将原本会影响客户端 JavaScript 包大小的大型依赖项保留在服务器上, 从而提升性能。服务器组件使编写 React 应用程序的感觉类似于 PHP 或 Ruby on Rails, 但具备 React 和组件模型的强大灵活性, 用于模板化用户界面

使用服务器组件, 初始页面加载更快, 客户端的 JavaScript 包大小减小。基本的客户端运行时是可缓存且大小可预测的, 并且随着应用程序的增长不会增加。只有在应用程序中通过客户端组件使用客户端交互性时, 才会添加额外的 JavaScript

当使用 Next.js 加载路由时, 初始 HTML 在服务器上渲染。然后, 在浏览器中逐步增强该 HTML, 允许客户端接管应用程序并通过异步加载 Next.js 和 React 客户端运行时来添加交互性

为了更轻松地过渡到服务器组件, 应用程序路由器(App Router)中的所有组件默认都是服务器组件, 包括特殊文件和同目录组件。这使你可以自动采用它们, 无需额外工作, 从而实现出色的性能。你还可以选择使用 'use client' 指令选择性地采用客户端组件

在通常情况下, 会按照交互性分类, 下图是官网的一张设计图

thinking-in-server-components

The majority of components are non-interactive and can be rendered on the server as Server Components. For smaller pieces of interactive UI, we can sprinkle in Client Components'

# routeing

# courses

# nextjs-dashboard

course link (opens new window), 体验链接 (opens new window).

# other

# dynamic route

link (opens new window)

  • [slug].js: 表示一个捕获单个路径部分的动态路由
  • [...slug]: 是一个 catch-all 路由, 它会匹配路径中任意数量的子路径段,并将它们作为一个数组传递给页面. link (opens new window)

# route cache

在 Next.js 中,router cache (opens new window)是指在页面之间导航时, Next.js 可以缓存先前页面的渲染结果。这样可以提高页面之间导航的速度和性能, 因为它可以避免重新渲染先前已经渲染过的页面

Next.js 的路由缓存是通过使用客户端路由器(通常是基于浏览器的)来实现的。当你使用 <Link> 组件或 router.push() 等方法进行页面导航时, Next.js 会尝试从缓存中加载页面的渲染结果, 而不是重新生成页面

在某些情况下, 你可能希望禁用路由缓存, 以便在每次导航时都重新渲染页面。你可以通过在 router.push() 或 Link 组件中传递 shallow 属性为 true 来实现。这样可以告诉 Next.js 忽略缓存并强制重新渲染页面

import { useRouter } from 'next/router';

function SomeComponent() {
    const router = useRouter();

    const handleClick = () => {
        router.push('/some-page', undefined, { shallow: true });
    };

    return <button onClick={handleClick}>Go to Some Page</button>;
}
1
2
3
4
5
6
7
8
9
10
11

这样设置后, 每次通过点击按钮进行导航时, 页面都会重新渲染

需要注意的是, 路由缓存是默认启用的, 并且对于大多数情况都是有益的, 因为它可以显著提高页面导航的速度

在 Next.js 中,<Link> 组件的 as 属性用于 自定义 URL 显示方式,使得实际的浏览器地址与应用内部的路由路径(即 href)可以有所不同。简单来说,href 和 as 提供了 URL 重写的功能

  1. href 与 as 属性的作用
  • href：定义的是 内部路由,它是应用程序中路由的实际路径,通常是一个 Next.js 页面路径
  • as：定义的是 展示在浏览器地址栏中的路径,即 URL 重写的结果。它是用户在浏览器中看到的实际路径
  1. 如何工作

当你使用 as 属性时,href 指定了要访问的内部路由,而 as 提供了一个 不同的 URL 显示方式,通常用于动态路由的情景。例如,当你有动态路由但希望向用户展示一个更友好的 URL

示例

<Link href="/post/[...slug]" as="/post/2020/first-post/with/catch/all/routes">
    First Post
</Link>
1
2
3

在这个例子中：

  • href="/post/[...slug]"：这是 Next.js 中定义的 动态路由,它表示一个接收多个路径段的动态路由。[...slug] 是一个 catch-all 路由,用来捕获任何匹配该路径的请求
  • as="/post/2020/first-post/with/catch/all/routes"：这是 用户看到的 URL。尽管 href 是动态路由,as 指定了一个更具可读性、具体的 URL

详细解释

  • 当用户点击 First Post 时,Next.js 会导航到 /post/[...slug],并且由于 as 的设置,浏览器的地址栏会显示为 /post/2020/first-post/with/catch/all/routes
  • 在后台,Next.js 仍然会解析为 /post/[...slug],并根据路径参数解析出 [slug] 的具体值,例如：
    • slug = ["2020", "first-post", "with", "catch", "all", "routes"]

这使得应用内部路由和浏览器地址栏显示可以保持一致,但对开发者而言,href 仍然使用的是动态路由模式

  1. 常见用途
  • 动态路径重写：当你有动态路由并希望控制 URL 的显示格式时,可以使用 as 来格式化 URL。例如,展示更具描述性的路径而不是自动生成的 ID
  • SEO 优化：如果你希望让用户和搜索引擎看到更友好的 URL(例如 /post/2020/first-post),而内部仍然使用一个动态路由(/post/[slug])来处理多个参数
#Web
上次更新: 2025/10/09, 23:53:03
REACT 高频问题
web modules

← web modules→

最近更新
01
npx 使用指南
10-12
02
cursor
09-28
03
inspect
07-20
更多文章>
Theme by Vdoing | Copyright © 2019-2025 Jacky | MIT License