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

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

article 2025/3/12 22:07:12

目录

一、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版本的写法，或者直接注释掉即可。

 


http://www.kler.cn/a/581904.html

相关文章：

  • 【MySQL是怎么运行的】0、名词解释
  • 分布式 ID 设计方案
  • Rust 之一 基本环境搭建、各组件工具的文档、源码、配置
  • 【每日八股】Redis篇（四）：持久化（下）
  • 机器学习中的梯度下降是什么意思？
  • 图像识别技术与应用课后总结（16）
  • Spring MVC 详细分层和微服务
  • Redis线上问题排查指南：常见错误与解决思路
  • 统计登录系统10秒内连续登录失败超过3次的用户
  • 计算机三级网络技术备考（5）
  • 每天一道算法题【蓝桥杯】【x的平方根】
  • Kylin麒麟操作系统服务部署 | Ansible基础
  • Axure RP 9 安装与汉化指南（附安装包）包含下载、安装、汉化、授权，Axure9 汉化教程、Axure9 汉化步骤
  • 不用 Tomcat？SpringBoot 项目用啥代替？
  • 智能体开发：推理-行动（ReAct）思维链提示
  • 【2025最新】DeepSeek-R1+Open-WebUI双系统部署全攻略：从Linux到Windows保姆级教程，手把手搭建可视化AI对话平台
  • 从零开始学机器学习——准备和可视化数据
  • springboot 文件下载
  • 带有LBS_OWNERDRAWFIXED 样式的列表框，系统在什么时候向窗口发送WM_DRAWITEM 和WM_MEASUREITEM消息de呢？
  • 使用DeepSeek+蓝耘快速设计网页简易版《我的世界》小游戏