【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,有以下新特性。
•
app
Directory (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