Frontend React Learning

Next.js学习(一)

Next.js学习

Next.js简介

Next.js是一个基于React的全栈框架，提供了服务器端渲染（SSR）、静态站点生成（SSG）等功能，极大地简化了React应用的开发流程。在React弃用Create React App (CRA)之后，React官方就推荐使用框架来构建应用，而Next.js是目前React最主流的框架，拥有庞大的社区和丰富的生态系统，对于一个想用React构建一个新的应用或网站的开发者来说，Next.js无疑是一个非常好的选择。作为一个全栈框架，Next.js不仅可以用于构建前端界面，还可以处理后端逻辑，使得开发者可以在同一个项目中同时处理前后端代码，极大地提高了开发效率。

Next.js的核心特性

Next.js有着许多重要的特性，以下是其中一些核心特性：

服务器端渲染（SSR）

服务器端渲染是Next.js的一个重要特性，它允许在服务器上预先渲染React组件，然后将生成的HTML发送到客户端。这种方式不仅提高了页面加载速度，还对SEO非常友好，因为搜索引擎可以更容易地抓取预渲染的内容。Next.js通过getServerSideProps函数实现SSR，可以在这个函数中获取数据并传递给页面组件。

静态站点生成（SSG）

静态站点生成是Next.js的另一个重要特性，它允许在构建时预先生成静态HTML文件，然后在请求时直接提供这些文件。SSG适用于内容不频繁变化的页面，如博客文章、产品展示等。Next.js通过getStaticProps和getStaticPaths函数实现SSG，可以在这些函数中获取数据并生成静态页面。

API路由

Next.js内置了API路由功能，允许开发者在项目中创建后端API接口。在app下可以创建api文件夹，然后可以在api文件夹下创建如route.ts的文件来定义API路由，在route.ts中编写处理请求、身份验证等的代码。

文件系统路由

Next.js采用文件系统路由的方式，根据app目录下的文件和文件夹结构自动生成路由。这种方式使得路由管理变得非常简单，只需创建相应的文件和文件夹即可定义路由，无需手动配置路由表。后面我会详细介绍文件系统路由的使用方法。

内置CSS和Sass支持

Next.js内置了对CSS和Sass的支持，允许开发者直接在组件中导入CSS或Sass文件进行样式管理。此外，Next.js还支持CSS模块化，避免了样式冲突的问题。开发者可以通过创建.module.css或.module.scss文件来实现组件级别的样式隔离。

图片优化

Next.js提供了内置的图片优化功能，通过next/image组件可以自动处理图片的大小、格式和质量，提升页面加载速度和用户体验。使用next/image组件替代传统的<img>标签，可以很方便地实现响应式图片和懒加载等功能。

开始使用Next.js

创建Next.js项目

要创建一个新的Next.js项目，可以使用以下命令：

1
2


npx create-next-app@latest

这将启动一个交互式的命令行工具，帮助你配置项目的基本设置。你可以选择使用TypeScript、ESLint等选项。

运行开发服务器

进入项目目录后，可以使用以下命令启动开发服务器：

1

npm/pnpm run dev

这将在http://localhost:3000启动开发服务器，你可以在浏览器中访问该地址查看你的Next.js应用。

项目结构

Next.js项目的基本结构如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

my-app/
├── .next/
├── app/
│   ├── api/
│   ├── layout.tsx
│   ├── page.tsx
│   └── ...
├── components/
├── node_modules/
├── public/
├── next.config.js
├── package.json
└── ...
  • app/：存放应用的页面和布局文件。
  • components/：存放可复用的React组件。
  • public/：存放静态资源，如图片、字体等。
  • next.config.js：Next.js的配置文件。
  • package.json：项目的依赖和脚本配置文件。

以上并非完整的项目结构，只是一个简要的概览，实际项目中可能会有更多的文件和文件夹。

ESLint和Prettier配置

ESLint配置

Next.js默认集成了ESLint，可以帮助你保持代码质量和一致性。如果你在创建项目时选择了ESLint选项，Next.js会自动生成一个.eslintrc.config.mjs文件，你可以根据需要进行修改和扩展。如果你使用VS Code，可以安装ESLint插件，以便在编辑器中实时检查代码问题。

创建项目默认生成的ESLint配置文件内容如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    ".next/**",
    "out/**",
    "build/**",
    "next-env.d.ts",
  ]),
]);

export default eslintConfig;

其中，nextVitals和nextTs分别包含了Next.js核心Web Vitals和TypeScript相关的ESLint规则。globalIgnores用于定义全局忽略的文件和文件夹，避免ESLint检查这些文件。

prettier配置

Next.js项目通常也会集成Prettier，用于代码格式化。如果你使用VS Code，可以下载Prettier插件，以便在编辑器中自动格式化代码。你可以在项目中安装Prettier依赖：

1

npm/pnpm install --save-dev prettier

然后在项目根目录下创建一个.prettierrc文件，配置Prettier的选项。例如：

1
2
3
4
5
6

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

这里的配置选项包括是否使用分号、单引号、制表符宽度和尾随逗号等。你可以根据实际情况进行调整。

集成ESLint和Prettier

为了避免ESLint和Prettier之间的冲突，可以安装eslint-config-prettier和eslint-plugin-prettier，并在ESLint配置文件中进行相应的设置：

1

npm/pnpm install --save-dev eslint-config-prettier eslint-plugin-prettier

然后在.eslintrc.config.mjs中添加以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import prettierConfig from "eslint-config-prettier";
import prettierPlugin from "eslint-plugin-prettier";

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  ...prettierConfig,
  {
    plugins: [prettierPlugin],
    rules: {
      "prettier/prettier": "error",
    },
  },
  // Override default ignores of eslint-config-next.
  globalIgnores([
    // Default ignores of eslint-config-next:
    ".next/**",
    "out/**",
    "build/**",
    "next-env.d.ts",
  ]),
]);

export default eslintConfig;

这样，ESLint会使用Prettier的规则进行代码格式检查，确保代码风格的一致性。

创建布局与页面

在Next.js中，布局文件通常命名为layout.tsx，用于定义应用的整体结构和样式。页面文件通常命名为page.tsx，用于定义具体的页面内容。你可以在app目录下找到这些文件，并根据需要进行修改和扩展。也可以在app目录下创建子文件夹来组织不同的页面和布局。Next.js会根据文件夹结构自动生成相应的路由。

例如我想创建about页面，可以在app目录下创建一个名为about的文件夹，然后在该文件夹下创建layout.tsx，page.tsx文件，内容如下：

1
2
3
4
5
6
7
8
9

// app/about/layout.tsx
export default function AboutLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <h1>About Us</h1>
      <main>{children}</main>
    </div>
  );
}

1
2
3
4

// app/about/page.tsx
export default function AboutPage() {
  return <p>This is the about page.</p>;
}

这样就创建了一个/about路由，对应的页面内容为"This is the about page."，并且使用了AboutLayout作为布局。可以访问http://localhost:3000/about来查看效果。

使用API路由

要创建API路由，可以在app/api目录下创建相应的文件夹和文件。例如，创建一个名为hello的API路由，可以在app/api/hello/route.ts中编写如下代码：

1
2
3
4
5

import { NextResponse } from 'next/server';

export async function GET() {
  return NextResponse.json({ message: 'Hello, Next.js API!' });
}

这样就创建了一个/api/hello的API路由，可以通过发送GET请求来获取响应。可以使用浏览器或Postman等工具访问http://localhost:3000/api/hello来查看效果。

自定义配置

Next.js允许通过next.config.js文件进行自定义配置。你可以在该文件中设置各种选项，如环境变量、Webpack配置等。例如，以下是一个简单的next.config.js示例：

1
2
3
4
5
6
7

import { NextConfig } from 'next';

const nextConfig: NextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};
module.exports = nextConfig;

这个配置启用了React严格模式和SWC压缩，可以根据项目需求进行调整和扩展。

部署Next.js应用

Next.js应用可以部署到多种平台，如Vercel、Netlify、AWS等。Vercel是Next.js的官方部署平台，提供了无缝的集成和优化。要部署到Vercel，可以按照以下步骤操作：

  1. 在Vercel官网注册并登录账号。
  2. 连接你的GitHub/GitLab/Bitbucket仓库。
  3. 选择要部署的Next.js项目。
  4. 配置构建和部署选项，然后点击“Deploy”按钮。

Vercel会自动构建并部署你的Next.js应用，完成后会提供一个访问链接。需要注意的是Vercel对免费账号有一定的使用限制，具体可以参考Vercel官网的说明。

结语

Next.js是一个十分好用的React全栈框架，也是现在国内很多公司使用的主流框架。学习Next.js对于提升React开发技能和构建高性能Web应用非常有帮助。

参考资料

Licensed under CC BY-NC-SA 4.0