nextjs15--基础--1--介绍和安装

WEI_Gaot
300 阅读4分钟

一 Next.js 15

是一个重要的 Next.js 版本，它在性能、开发体验和功能方面都带来了显著的改进。以下是对 Next.js 15 的详细介绍，包括其优势、劣势以及使用它的公司：

Next.js 15 的主要特点和优势：

  • React 19 支持：

    • Next.js 15.1 已经完全支持 React 19。这使得开发者可以利用 React 19 的最新特性，提升应用程序的性能和用户体验。
    • Pages Router 可以使用 React 19 稳定版，同时继续支持 React 18。
    • App Router 将继续提供内置的 React Canary 版本。

  • 改进的错误调试：

    • Next.js 增强了错误调试功能，无论是在终端、浏览器还是附加调试器中，都能更快地定位问题源头。
    • 这些增强适用于 Webpack 和 Turbopack。

  • 优化的缓存行为：

    • Next.js 15 更改了 GET 路由处理程序的默认缓存行为，提供了更灵活的缓存控制。
    • 默认情况下，GET 函数不再缓存。
    • 如果需要，您仍然可以使用静态路由配置选项来选择启用缓存。

  • 开发体验的提升：

    • Next.js 15 致力于提供更流畅、更高效的开发体验，减少开发者的调试时间和工作量。
    • next.config：为 next.config.ts 提供 TypeScript 支持。
    • 自托管改进：更好地控制 Cache-Control 标头。
    • 服务器Actions 安全性：不可猜测的端点和移除未使用的操作。
    • 捆绑外部包（稳定版）：App Router 和Pages Router 的新配置选项。

  • 性能优化：

    • 通过对缓存机制和错误处理的改进，Next.js 15 能够更好地优化应用程序的性能，提高加载速度和响应能力。

Next.js 的潜在劣势：

  • 学习曲线：

    • 对于初学者来说，Next.js 的一些高级特性，如服务器端渲染（SSR）和静态站点生成（SSG），可能需要一定的学习成本。

  • 复杂性：

    • 随着应用程序规模的增长，Next.js 项目可能会变得复杂，需要更好的代码组织和管理。

  • 版本更新：

    • Next.js 的快速迭代意味着开发者需要不断学习和适应新的版本和特性。

使用 Next.js 的公司：

Next.js 因其卓越的性能和开发体验，被众多知名公司广泛采用，包括：

  • Netflix
  • TikTok
  • Uber
  • 星巴克
  • 初创企业 ...

二 安装nextjs

npx create-next-app@latest

  • 3.png

  • Turbopack 是什么？

  • Turbopack 是由 Next.js 的创建者开发的，一个用 Rust 编写的打包工具。

  • 它的目标是比 Webpack 快得多，特别是对于大型项目。

  • 它专注于提供更快的开发服务器启动时间和更快的热模块替换（HMR）。

cd <项目名字> | npm run dev

4.png

三 创建自己的第一个页面

  • 在根目录下的app文件中创建awesome文件，创建page.js(page.jsx 都可以以后不再重复)

  • 必须是page.js(x)命名的

export default function Awesome() {
  return (
    <div>
      <h1>Awesome</h1>
      <p>This is the awesome page.</p>
    </div>
  );
}

5.pgn.png

6.png

恭喜你创建了自己的第一个界面🎉🎉🎉

四 Pages Router VS App Router

在 Next.js 中，Pages Router 和 App Router 是两种不同的路由系统，它们在处理 Web 应用程序的路由和数据获取方面有显著差异。以下是对它们的比较：

Pages Router:

  • 基于文件系统的路由：

    • 路由是基于 pages 目录中的文件结构隐式定义的。
    • 例如，pages/about.js 对应于 /about 路由。

  • 数据获取方法：

    • 使用 getServerSideProps、getStaticProps 和 getStaticPaths 等特殊函数进行服务器端数据获取。

  • 客户端渲染和服务器端渲染：

    • 支持客户端渲染 (CSR) 和服务器端渲染 (SSR)。

  • 相对简单：

    • 对于简单的应用程序和静态站点，Pages Router 易于学习和使用。

App Router:

  • 基于文件夹的布局：

    • 路由在 app 目录中使用文件夹和特殊文件（如 page.js）显式定义。
    • 提供更灵活的布局和嵌套路由。

  • 服务器组件：

    • 引入了服务器组件，允许在服务器上渲染组件，从而提高性能。

  • 数据获取：

    • 允许在组件内部使用 async/await 直接进行服务器端数据获取。

  • 流式传输和 Suspense：

    • 支持流式传输和 React Suspense，以提供更好的用户体验。

  • 更强大的功能：

    • 适用于需要复杂路由、布局和数据获取的大型应用程序。

主要区别总结：

  • 路由定义：

    • Pages Router：基于文件系统。
    • App Router：基于文件夹和配置。

  • 数据获取：

    • Pages Router：使用特殊函数。
    • App Router：在组件内部直接获取。

  • 服务器组件：

    • Pages Router：不支持。
    • App Router：支持。

  • 复杂性：

    • Pages Router：相对简单。
    • App Router：更复杂，但功能更强大。

以后我将使用App Router （没有特殊说明的情况下）❗

avatar
文章
阅读
粉丝