【Next.js13快速入门】（一Next.js 13 新特性和项目初始化
Next.js 是什么？
What is Next.js[1]
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[2]
Next.js 13 相对于 Next.js 12，有以下新特性。
•
appDirectory (beta):[3] 使用app目录替换pages/_app.js文件。嵌套布局简单方便，支持 React 服务端组件渲染。• Layouts[4]
• React Server Components[5]
• Streaming[6]
• Turbopack (alpha):[7] 基于 Rust 的 Webpack 替代品，速度提高了 700 倍。
• New
next/image:[8] 更新了图片模块，支持本地浏览器懒加载，效率更高。• New
@next/font(beta):[9] 全新字体系统。• Improved
next/link:[10]<Link>组件不用再嵌套使用<a>标签.
还有部分API的变化，接下来的案例文章会提到。
项目初始化
Create Next App | Next.js[11]
安装
npx create-next-app@latest 如果安装卡住，可以使用国内镜像。
npm config set registry https://registry.npmmirror.com你也可以把配置项以参数的形式传递给 npx 命令。
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[12]
安装 Tailwind CSS。
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p配置 Tailwind CSS。
/** @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。
@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[13]
jagnani73/next-ts-twcss: Template for NextJS, on TypeScript and TailwindCSS[14]
Cubxity/next-typescript-tailwindcss-template: Simplistic Next.js + TypeScript + Tailwind CSS website template.[15]
配置
配置 app 目录：
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
experimental: { appDir: true },
}
module.exports = nextConfig配置 Turbopack。
Advanced Features: Turbopack | Next.js[16]
Turbopack 是 Next13 中加入了全新的打包工具，它是出自 Webpack 作者 TobiasKoppers 之手，官方描述是：开发时更新速度比 Webpack 快 700 倍、比 Vite 快 10 倍。
"scripts": {
"dev": "next dev --turbo",
"build": "next build",
"start": "next start",
"lint": "next lint"
},nextjs学习资源
https://nextjs.org/learn/foundations/about-nextjs
参考资料
你好，Next.js 13 - 掘金[17]
npmmirror 中国镜像站[18]
欢迎关注我的公众号“码农真经”，原创技术文章第一时间推送。
引用链接
[1] What is Next.js: https://nextjs.org/learn/foundations/about-nextjs/what-is-nextjs[2] Next.js 13: https://nextjs.org/blog/next-13[3] app Directory (beta):: https://nextjs.org/blog/next-13#new-app-directory-beta[4] Layouts: https://nextjs.org/blog/next-13#layouts[5] React Server Components: https://nextjs.org/blog/next-13#server-components[6] Streaming: https://nextjs.org/blog/next-13#streaming[7] Turbopack (alpha):: https://nextjs.org/blog/next-13#introducing-turbopack-alpha[8] New next/image:: https://nextjs.org/blog/next-13#nextimage[9] New @next/font (beta):: https://nextjs.org/blog/next-13#nextfont[10] Improved next/link:: https://nextjs.org/blog/next-13#breaking-changes[11] Create Next App | Next.js: https://nextjs.org/docs/api-reference/create-next-app[12] Install Tailwind CSS with Next.js - Tailwind CSS: https://tailwindcss.com/docs/guides/nextjs[13] mzhren/next13-ts-twcss-app: a template for next.js 13 with typescript and tailwindcss: https://github.com/mzhren/next13-ts-twcss-app[14] jagnani73/next-ts-twcss: Template for NextJS, on TypeScript and TailwindCSS: https://github.com/jagnani73/next-ts-twcss[15] Cubxity/next-typescript-tailwindcss-template: Simplistic Next.js + TypeScript + Tailwind CSS website template.: https://github.com/Cubxity/next-typescript-tailwindcss-template[16] Advanced Features: Turbopack | Next.js: https://nextjs.org/docs/advanced-features/turbopack[17] 你好，Next.js 13 - 掘金: https://juejin.cn/post/7160084572942630926[18] npmmirror 中国镜像站: http://www.npmmirror.com/?spm=a2c6h.14029880.0.0.3aab3839RZLuwg