Next.js第二章(项目搭建)
Next.js 项目搭建
创建项目
快速入门
注： 当前教程为16.0.1版本，最低Node.js版本为20.9.0
npx create-next-app@latest
接下来会有几个问题需要你选择，根据你的需求选择即可
- What is your project named? » my-app
项目名称（必填） - Would you like to use the recommended 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 Compiler? » No / Yes
是否使用React Compiler这里我选是Yes - Would you like to use Tailwind CSS? » No / Yes
是否使用Tailwind CSS这里我选是Yes - Would you like to use
src/appdirectory? » No / Yes是否使用src/app目录这里我选是Yes - Would you like to use App Router? (recommended) » No / Yes
是否使用App Router这里我选是Yes - Would you like to use Turbopack? (recommended) » 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 Compiler?
React Compiler 是Next.js 用于自动优化组件渲染来提高性能的工具，在之前的话，我们需要手动优化useMemo / useCallback /memo等，现在Next.js会自动优化，你只需要写代码即可,减少心智负担。
如何开启React Compiler? 如果你在选项中选择yes则无需安装
npm install -D babel-plugin-react-compiler
next.config.ts
import type { NextConfig } from 'next'const nextConfig: NextConfig = {reactCompiler: 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 分钟
难度级别: 初级 🟢