Next.js第二章(项目搭建)

Next.js 项目搭建

创建项目

快速入门

注： 当前教程为16.0.2版本，最低Node.js版本为20.9.0

npx create-next-app@latest

接下来会有几个问题需要你选择，根据你的需求选择即可

• What is your project named? » my-app 项目名称（必填）
• Would you like to use the re***mended Next.js defaults? 是否使用推荐配置 这里我选自定义配置 No, customize settings
• Would you like to use TypeScript? » No / Yes 是否使用TypeScript 这里我选是 Yes
• Which linter would you like to use? » ESLint / Biome / None 是否使用ESLint 这里我选是 None
• Would you like to use React ***piler? » No / Yes 是否使用React ***piler 这里我选是 Yes
• Would you like to use Tailwind CSS? » No / Yes 是否使用Tailwind CSS 这里我选是 Yes
• Would you like to use src/app directory? » No / Yes 是否使用src/app目录 这里我选是 Yes
• Would you like to use App Router? (re***mended) » No / Yes 是否使用App Router 这里我选是 Yes
• Would you like to use Turbopack? (re***mended) » No / Yes 是否使用Turbopack 这里我选是 Yes
• Would you like to customize the import alias (@/* by default)? » No / Yes 是否自定义导入别名 @/* 这里我选是 Yes
• What import alias would you like configured? » @/* 是否自定义导入别名 @/* 这里我选是 默认 @/*

选择完成之后，他会执行npm install安装依赖，安装完成之后，他会执行npm run dev启动项目，访问http://localhost:3000即可看到项目。

目录结构介绍

public/ -> 静态资源目录
src/ -> 源代码目录
  └─app/ -> App Router目录
     └─layout.tsx -> 跟布局(必须存在 且必须包含html body标签)
     └─page.tsx -> 首页
     └─globals.css -> 全局样式
next-env.d.ts -> TypeScript类型定义文件
next.config.ts -> Next.js配置文件
tsconfig.json -> TypeScript配置文件
postcss.config.mjs -> PostCSS配置文件(主要用于处理tailwindcss)
package.json -> 包管理文件
README.md -> 项目说明文件

命令介绍

next dev -> 启动开发服务器 -> npm run dev
next build -> 构建项目 -> npm run build
next start -> 启动生产服务器 -> npm run start

FAQ

什么是Turbopack？

Turbopack 是一个增量打包器，用于取代webpack,它是用Rust语言编写,并且Turbopack转换js/ts使用的是SWC,他比vite快10倍，比webpack快700倍，速度更快，性能更优。

核心原理：Turbopack是函数级别的缓存，可以将某些函数，进行标记，当这些函数被调用时，会记住他们被调用的内容，保存到缓存中。

首先我们看到有两个文件api.ts/ sdk.ts 都调用了readFile函数，然后把这两个文件打包成bundle,然后拼接起来,最后打成一个fullBundle

例如sdk.js发生了变化，而api.js没有改变，所以他就只会打包sdk.js,而不会打包api.js,只需要从缓存中读取api.js内容即可，这样就可以节省非常多的时间，意味着它永远不需要执行两次相同的工作。

什么是React ***piler?

React ***piler 是Next.js 用于自动优化组件渲染来提高性能的工具，在之前的话，我们需要手动优化useMemo / useCallback /memo等，现在Next.js会自动优化，你只需要写代码即可,减少心智负担。

如何开启React ***piler? 如果你在选项中选择yes则无需安装

npm install -D babel-plugin-react-***piler

next.config.ts

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  react***piler: true, //开启即可
}
 
export default nextConfig

什么是App Router?

Next.js 有两套路由系统，一个是旧的Pages Router路由系统，一个是新的App Router路由系统。

首先Next.js 首推的是App Router路由系统

• Pages Router的路由系统是会把pages目录下的所有jsx/tsx文件，都转换成路由，例如pages/index.tsx会转换成/路由，pages/about.tsx会转换成/about路由，这样导致我们不能把组件写到pages目录下。

目录结构如下

 └── pages
    ├── index.tsx -> /
    ├── login.tsx -> /login
    ├── api
    │   └── user.tsx -> /api/user
    ├── posts
    │   └── [id].tsx -> /posts/[id]
    └── blog
        ├── index.tsx -> /blog
        └── setting.tsx -> /blog/setting

• App Router的路由系统是根据约定定义的，目录结构如下

src/
└── app
    ├── page.tsx -> / 首页
    ├── layout.tsx -> 布局组件
    ├── template.tsx -> 模板组件
    ├── loading.tsx -> 加载组件
    ├── error.tsx -> 错误组件
    └── not-found.tsx -> 404组件
    ├── xiaoman
    │   └── page.tsx -> /xiaoman 小满页面
    └── daman
        └── page.tsx -> /daman 大满页面

• Pages Router 读取数据需要使用getServerSideProps / getStaticProps / getStaticPaths等函数，而App Router则不需要，直接在组件中使用fetch调用即可。

Pages Router:

export async function getServerSideProps() {
  const res = await fetch('xxx');
  const data = await res.json();
  return { props: { data } };
}
export default function Home({ data }) {
  return <div>{data.name}</div>;
}

App Router:

export default async function Home() {
  const res = await fetch('xxx');
  const data = await res.json();
  return <div>{data.name}</div>;
}

预计学习时间: 10 分钟
难度级别: 初级 🟢