logo

Filip Jerga

Filip Jerga

Nextjs 13 项目初始化.

Learn how to write markdown. This is just a testing blog.

next.js 13

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框架，为你提供了创建快速网络应用的构建模块。也是现在比较通用的一种React框架。

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

Next.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

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

Next.js 13

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

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

项目初始化

Create Next App | Next.js

安装

npx create-next-app@latest

create-next-app

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

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

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

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

npx-create-next-app

配置 Tailwind CSS

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

Install Tailwind CSS with Next.js - Tailwind CSS

安装 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

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 目录： 

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

module.exports = nextConfig

appDir

配置 Turbopack。

Advanced Features: Turbopack | Next.js

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：一个更现代的海王

你好，Next.js 13 - 掘金

npmmirror 中国镜像站