网站导航
> 技术文档 > nextjs15简要介绍以及配置eslint和prettier

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

网友: 技术文档 2025-08-15 17:06:05

目录

一、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 
{JSON.stringify(data)}
;}

📌 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 
{JSON.stringify(data)}
;}

📌 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. 组件

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

这些更新使 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$)\", \"\", \"\", \"^@/(.*)$\", \"^[./]\" ], \"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版本的写法，或者直接注释掉即可。

 

网络标签：

相关问题