Next.js如何安装使用自动安装建议使用create-Next启动一个新的Next.js应用程序项目，它会自动为您设

Node版本必须不低于18.17.0。

自动安装

建议使用create-Next启动一个新的Next.js应用程序项目，它会自动为您设置所有内容。

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 to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

提示后，创建下一个项目将使用您的项目名称创建一个文件夹，并安装所需的依赖项。

Next.js现在默认提供TypeScript、ESLint和Tailwind CSS配置。

您可以选择使用项目根目录中的src目录将应用程序的代码与配置文件分离。

手动安装

npm install next@latest react@latest react-dom@latest

在package.json文件中添加：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

这些脚本指的是开发应用程序的不同阶段：

dev：运行next-dev以在开发模式下启动next.js。

build：运行下一个build来构建应用程序以供生产使用。

start：运行next start来启动next.js生产服务器。

lint：运行next-lint来设置next.js的内置ESLint配置。

创建文件目录

app目录

> app
   layout.js
   page.js

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

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

pages目录

> pages
   _app.js
   _index.js
   _document.js

export default function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}