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

目录

一、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.组件

三、nextjs15配置eslint和prettier

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

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

3、vscode编辑器eslint配置检查

---

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

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

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

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

1. 服务器端渲染（SSR - Server-Side Rendering）
2. 静态生成（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版本的写法，或者直接注释掉即可。