Next.js 是什么？

What is Next.js

Next.js is a flexible React framework that gives you building blocks to create fast web applications.

Next.js 是一个灵活的React框架，为你提供了创建快速网络应用的构建模块。

Next.js是一个构建于 Node.js 之上的开源 Web 开发框架，支持基于 React 的 Web 应用程序功能，例如服务端渲染和生成静态网站。Next.js 是最流行的 React 框架之一。 React 于官方文件内的“推荐的工具链”中提及 Next.js，建议将其作为“使用 Node.js 构建服务器渲染网站”的解决方案。

Next.js 特性总结：

• 基于React，支持csr、ssr、isr、ssg等渲染或用于渲染的生成方式
• 支持ssr，但只是next.js的一个场景而已
• next.js是Node web领域优秀的ssr框架，支持serverless了
• 搭配vercel部署，对serverless支持极好
• 开箱即用，简单易用

Next.js 13 新特性

2022 年 10月， Vercel 在 Next.js 会议上发布了 Next.js 13 最新版本。

Vercel Inc.（以前称为Zeit）是美国的云平台即服务公司。该公司维护着Next.js Web开发框架。Vercel的体系结构围绕Jamstack构建，并且通过Git存储库处理部署。

Next.js 13

Next.js 13 相对于 Next.js 12，有以下新特性。

• app Directory (beta): 使用app目录替换pages/_app.js文件。嵌套布局简单方便，支持 React 服务端组件渲染。
  • Layouts
  • React Server Components
  • Streaming
• Turbopack (alpha): 基于 Rust 的 Webpack 替代品，速度提高了 700 倍。
• New next/image: 更新了图片模块，支持本地浏览器懒加载，效率更高。
• New @next/font (beta): 全新字体系统。
• Improved next/link: <Link>组件不用再嵌套使用 <a> 标签.

还有部分API的变化，接下来的实例文章会提到。

项目初始化

Create Next App | Next.js

安装

1

npx create-next-app@latest 

如果安装卡住，可以使用国内镜像。

1

npm config set registry https://registry.npmmirror.com

你也可以把配置项以参数的形式传递给 npx 命令。

1

npx create-next-app@latest next13-ts-twcss-app-turbo --ts --experimental-app

配置 Tailwind CSS

我习惯 Next.js 与 Tailwind CSS 一起使用。

Install Tailwind CSS with Next.js - Tailwind CSS

安装 Tailwind CSS。

1
2

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

配置 Tailwind CSS。

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

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./app/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

引入 Tailwind CSS。

在 ./styles/globals.css 中引入 Tailwind CSS。

1
2
3

@tailwind base;
@tailwind components;
@tailwind utilities;

Fork 模板初始化

github 上有很多 Next.js 与 Tailwind CSS 的模板，可以直接 Fork。

mzhren/next13-ts-twcss-app: a template for next.js 13 with typescript and tailwindcss

jagnani73/next-ts-twcss: Template for NextJS, on TypeScript and TailwindCSS

Cubxity/next-typescript-tailwindcss-template: Simplistic Next.js + TypeScript + Tailwind CSS website template.

配置

配置 app 目录：

1
2
3
4
5
6
7

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: { appDir: true },
}

module.exports = nextConfig

配置 Turbopack。

Advanced Features: Turbopack | Next.js

Turbopack 是 Next13 中加入了全新的打包工具，它是出自 Webpack 作者 TobiasKoppers 之手，官方描述是：开发时更新速度比 Webpack 快 700 倍、比 Vite 快 10 倍。

1
2
3
4
5
6

 "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

nextjs学习资源

https://nextjs.org/learn/foundations/about-nextjs

参考资料

我看Next.js：一个更现代的海王

你好，Next.js 13 - 掘金

npmmirror 中国镜像站