当前位置：首页 > news >正文

nextjs15简要介绍以及配置eslint和prettier

news 2025/6/17 18:03:53

一、Next.js 何时使用服务器端渲染（SSR）？何时使用静态生成（SSG）？

1、服务器端渲染（SSR - getServerSideProps）

2、静态生成（SSG - getStaticProps）

3、什么时候使用 ISR（增量静态生成）？

🎯 SSR vs SSG vs ISR 对比

4、总结

二、nextjs15的优势

1. Turbopack 开发模式

2. React 19 支持

3. Hydration 错误改进

4. 静态路由指示器

5. 实验性功能

6.组件

Next.js 是一个基于 React 的 全栈框架，用于构建 高性能 Web 应用。它由 Vercel 开发和维护，提供了 服务器渲染（SSR）、静态生成（SSG）、API 路由、自动路由、全栈功能 等特性。

自问世以来，一直受到众多前度开发者的青睐，其版本也在不断地更新当中，如已经更新到了nextjs15

一、Next.js 何时使用服务器端渲染（SSR）？何时使用静态生成（SSG）？

Next.js 提供了 两种主要的页面渲染方式：

服务器端渲染（SSR - Server-Side Rendering）
静态生成（SSG - Static Site Generation）

此外，还有 增量静态生成（ISR - Incremental Static Regeneration） 作为 SSG 的增强版。

1、服务器端渲染（SSR - `getServerSideProps`）

📌 什么时候用 SSR？

页面数据依赖于请求时的最新数据
用户个性化内容（如用户登录状态、账户信息）
SEO 友好，并且内容实时变化
数据必须在请求时获取，不能提前生成

✅ 适用场景

动态新闻/社交媒体页面
用户仪表盘（Dashboard）
库存管理（需要最新库存数据）
A/B 测试（不同用户看到不同的内容）

📌 SSR 代码示例

export async function getServerSideProps(context) {const res = await fetch("https://api.example.com/data");const data = await res.json();return {props: { data }, // 这个 `data` 会被传递给组件};
}export default function Page({ data }) {return <div>{JSON.stringify(data)}</div>;
}

📌 SSR 发生的时间

每次请求 时都会运行 getServerSideProps
页面不会被缓存，每次访问都会请求 API

2、静态生成（SSG - `getStaticProps`）

📌 什么时候用 SSG？

数据在构建时就可以确定
数据不会频繁变化
SEO 友好，且性能要求高
减少服务器负载，提升访问速度

✅ 适用场景

博客文章
产品详情页
文档、帮助中心
营销页面（Landing Page）

📌 SSG 代码示例

export async function getStaticProps() {const res = await fetch("https://api.example.com/data");const data = await res.json();return {props: { data },revalidate: 60, // ISR: 60秒后重新生成页面};
}export default function Page({ data }) {return <div>{JSON.stringify(data)}</div>;
}

📌 SSG 发生的时间

只在 构建时 运行 getStaticProps
生成的 HTML 是静态的，用户访问时不再请求 API
可以配合 ISR（增量静态生成） 让部分数据自动更新（revalidate）

3、什么时候使用 ISR（增量静态生成）？

如果你需要 SSG 的性能，但数据又偶尔更新，可以使用 ISR（Incremental Static Regeneration）。

✅ 适用场景

产品价格、库存信息
新闻列表（不是实时新闻，但会定期更新）
带有 SEO 的动态内容

📌 ISR 代码示例

export async function getStaticProps() {const res = await fetch("https://api.example.com/data");const data = await res.json();return {props: { data },revalidate: 60, // 每 60 秒更新一次数据};
}

页面会在首次构建时生成
访问页面后，如果超过 revalidate 时间，Next.js 会后台重新生成
用户访问不会等更新完成，只会在下次请求时看到新页面

🎯 SSR vs SSG vs ISR 对比

渲染方式	何时渲染？	数据是否实时？	适用场景
SSR（服务器端渲染）	每次请求时	✅ 实时数据	账户信息、仪表盘、个性化页面
SSG（静态生成）	构建时	❌ 数据不会变	博客、产品页、文档
ISR（增量静态生成）	构建时生成，之后按 `revalidate` 更新	⏳ 定期更新	新闻、商品库存、SEO 友好的动态页面

4、总结

如果数据是动态的，并且需要最新的内容 → SSR
如果数据可以在构建时确定，且不会频繁变化 → SSG
如果数据不会实时更新，但仍然需要定期刷新 → ISR

二、nextjs15的优势

Next.js 15 发布后，带来了多项重要更新，旨在提升开发者体验和应用性能。以下是主要改进：

1. Turbopack 开发模式

next dev --turbo 现已稳定，可加速开发体验。在大型 Next.js 应用中，如 vercel.com，使用 Turbopack 开发模式可实现：

本地服务器启动速度：提升高达 76.7%
Fast Refresh 代码更新速度：提升高达 96.3%

citeturn0search0

2. React 19 支持

Next.js 15 与即将发布的 React 19 保持一致：

App Router：使用 React 19 RC
Pages Router：保持对 React 18 的向后兼容性，允许在准备就绪时升级到 React 19

3. Hydration 错误改进

改进了 hydration 错误视图，错误信息更清晰，并提供解决建议，提升调试效率。

4. 静态路由指示器

在开发过程中显示静态路由指示器，帮助识别哪些路由是静态的或动态的，便于优化性能。

5. 实验性功能

unstable_after API：允许在响应流式传输完成后处理任务，使次要任务在不阻塞主要响应的情况下运行。
instrumentation.js：提供 register() API，允许接入 Next.js 服务器生命周期，以监控性能、追踪错误源头，并深度集成如 OpenTelemetry 等可观测性库。

6. `<Form>` 组件

新的 <Form> 组件扩展了 HTML <form> 元素，增加了预获取、客户端导航和渐进增强功能，适用于需要导航到新页面的表单。

这些更新使 Next.js 15 成为一个更高效、更强大的框架，进一步提升了开发者的工作流程和应用性能。

三、nextjs15配置eslint和prettier

在前端开发项目当中使用eslint进行语法检查，prettier进行代码美化几乎已经成为一个标配。nextjs15默认支持eslint 9版本，跟之前8版本有很大的不同。

ESLint 8 及之前：使用 .eslintrc、.eslintrc.js、.eslintrc.json 或在 package.json 中配置。
ESLint 9：引入了全新的扁平化配置文件 eslint.config.js，取代了之前的配置方式。这种新格式更灵活，支持模块化配置。

最近在github找了一个依赖插件eslint-prettier-next-15，执行一条命令，即可配置帮你的项目配置好eslint和prettier。

首先，创建一个nextjs项目：

pnpm dlx create-nextjs-app my-app

创建完成后，再执行：

pnpm dlx eslint-prettier-next-15

这条命令会帮助项目做两件事情：

1、安装eslint和prettier所需依赖：

@eslint/eslintrc@3.2.0
@eslint/js@9.18.0
@ianvs/prettier-plugin-sort-imports@4.4.0
@typescript-eslint/eslint-plugin@8.19.1
@typescript-eslint/parser@8.19.1
eslint@9.18.0
eslint-config-next@15.1.4
eslint-config-prettier@9.1.0
eslint-plugin-prettier@5.2.1
prettier@3.4.2
prettier-plugin-sort-json@4.1.1

2、生成eslint和prettier的配置文件

.prettierrc.json

{"printWidth": 120,"singleQuote": false,"tabWidth": 2,"trailingComma": "es5","plugins": ["@ianvs/prettier-plugin-sort-imports","prettier-plugin-sort-json"],"importOrder": ["^(react/(.*)$)|^(react$)","^(next/(.*)$)|^(next$)","<THIRD_PARTY_MODULES>","","^@/(.*)$","^[./]"],"importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"]
}

eslint.config.mjs

import path from "node:path";
import { fileURLToPath } from "node:url";
import { FlatCompat } from "@eslint/eslintrc";
import js from "@eslint/js";
import typescriptEslintEslintPlugin from "@typescript-eslint/eslint-plugin";
import tsParser from "@typescript-eslint/parser";
import prettier from "eslint-plugin-prettier";const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({baseDirectory: __dirname,recommendedConfig: js.configs.recommended,allConfig: js.configs.all,
});export default [...compat.extends("next", "next/core-web-vitals", "prettier"),{plugins: {prettier,},rules: {"prettier/prettier": "error",camelcase: "off","import/prefer-default-export": "off","react/jsx-filename-extension": "off","react/jsx-props-no-spreading": "off","react/no-unused-prop-types": "off","react/require-default-props": "off","react/no-unescaped-entities": "off","import/extensions": ["error","ignorePackages",{ts: "never",tsx: "never",js: "never",jsx: "never",},],},},...compat.extends("plugin:@typescript-eslint/recommended", "prettier").map((config) => ({...config,files: ["**/*.+(ts|tsx)"],})),{files: ["**/*.+(ts|tsx)"],plugins: {"@typescript-eslint": typescriptEslintEslintPlugin,},languageOptions: {parser: tsParser,},rules: {"@typescript-eslint/explicit-function-return-type": "off","@typescript-eslint/explicit-module-boundary-types": "off","no-use-before-define": [0],"@typescript-eslint/no-use-before-define": [1],"@typescript-eslint/no-explicit-any": "off","@typescript-eslint/no-var-requires": "off",},},
];

还有prettier美化忽略文件：prettierignore

完成以上配置后，重新启动vscode就可以正常使用；

`3、vscode编辑器eslint配置检查`

但是，我在完成这个以后，发现eslint不起作用，代码中出现错误，也不提示红色波浪线。检查发现vscode的eslint模块总是爆出一下错误：

eslint Config (unnamed): Key "env": This appears to be in eslintrc format rather than flat config format.

这个错误提示是因为你的 ESLint 配置文件格式不符合 Flat Config（扁平配置）的要求。

检查发现我的vscode的settings.json配置文件当中存在：

settings.json

 "eslint.options": {"overrideConfig": {"env": {"browser": true,"es6": true},"parserOptions": {"ecmaVersion": 2019,"sourceType": "module","ecmaFeatures": {"jsx": true}},"rules": {"no-debugger": "off"}}},

以上是eslint 8版本的写法，在eslint 9版本当中env等属性都不存在了，因此与eslint9版本的写法发生了冲突。解决方法是将settings.json当中的eslint配置改用eslint9版本的写法，或者直接注释掉即可。

一、Next.js 何时使用服务器端渲染（SSR）？何时使用静态生成（SSG）？

1、服务器端渲染（SSR - getServerSideProps）

2、 静态生成（SSG - getStaticProps）

3、什么时候使用 ISR（增量静态生成）？

🎯 SSR vs SSG vs ISR 对比

4、总结

二、nextjs15的优势

1. Turbopack 开发模式

2. React 19 支持

3. Hydration 错误改进

4. 静态路由指示器

5. 实验性功能

6. <Form> 组件

三、nextjs15配置eslint和prettier

1、安装eslint和prettier所需依赖：

2、生成eslint和prettier的配置文件

3、vscode编辑器eslint配置检查

相关文章：

1、服务器端渲染（SSR - `getServerSideProps`）

2、静态生成（SSG - `getStaticProps`）

6. `<Form>` 组件

`3、vscode编辑器eslint配置检查`