My-Notes

001.安装

5分钟阅读

自动安装

$ npx create-next-app@latest
 
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

手动安装

pnpm i next@latest react@latest react-dom@latest
// package.json
{
  "scripts": {
    "dev": "next dev",     // 启动开发服务器
    "build": "next build", // 构建用于生产的应用程序
    "start": "next start", // 启动生产服务器
    "lint": "next lint"    // 运行 ESLint
  }
}

创建 src/app 目录

Next.js 使用文件系统路由，这意味着应用程序中的路由由文件的结构决定

创建一个 app 文件夹，然后在 app 夹内创建一个 layout.tsx 文件，此文件是根布局。它是必需的，并且必须包含 <html> 和 <body> 标签

// src/app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

创建一个主页 app/page.tsx 其中包含一些初始内容：

// src/app/page.tsx
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

当用户访问应用程序的根目录 (/) 时， layout.tsx 和 page.tsx 都将被呈现

创建 public 文件夹（可选）

在项目根目录创建一个 public 文件夹，用于存储静态资产，例如图像、字体等。然后，您的代码可以从基本 URL（/）开始引用 public 夹中的文件

// src/app/page.tsx
import Image from 'next/image'
 
export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}

设置 TypeScript

Next.js 内置了对 TypeScript 的支持。要将 TypeScript 添加到你的项目中，请将文件重命名为 .ts / .tsx 并运行 next dev。Next.js 将自动安装必要的依赖项，并添加一个包含推荐配置选项的 tsconfig.json 文件

设置 ESLint

Next.js 内置了 ESLint。当你使用 create-next-app 创建新项目时，它会自动安装必要的软件包并配置正确的设置

要手动将 ESLint 添加到现有项目，请将 next lint 作为脚本添加到 package.json。然后，运行 npm run lint，您将被引导完成安装和配置过程

? How would you like to configure ESLint?  
 
❯ Strict (recommended)
❯ Base
❯ Cancel
  • Strict ：包含 Next.js 的基本 ESLint 配置以及更严格的 Core Web Vitals 规则集。对于首次设置 ESLint 的开发者，建议使用此配置
  • Base：包括 Next.js 的基础 ESLint 配置
  • Cancel ：跳过配置。如果您打算设置自己的自定义 ESLint 配置，请选择此选项

如果选择了 Strict 或 Base ，Next.js 将自动在您的应用程序中安装 eslint 和 eslint-config-next 作为依赖项，并在项目的根目录中创建一个配置文件

设置绝对导入和模块路径别名

Next.js 内置了对 tsconfig.json 和 jsconfig.json 文件的 "paths" 和 "baseUrl" 选项的支持

这些选项允许你将项目目录设置为绝对路径，以便更轻松、更清晰地导入模块。例如：

// Before
import { Button } from '../../../components/button'
 
// After
import { Button } from '@/components/button'

要配置绝对路径导入，请在 tsconfig.json 或 jsconfig.json 文件中添加 baseUrl 配置选项。例如：

{
  "compilerOptions": {
    "baseUrl": "src/"
  }
}

除了配置 baseUrl 路径之外，您还可以使用 "paths" 选项来 "alias" 模块路径：

{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/styles/*": ["styles/*"],
      "@/components/*": ["components/*"]
    }
  }
}

每个 "paths" 都与 baseUrl 位置相关

关系图谱