Installation 系统需求: Node.js 16.8及以上版本。 支持macOS、Windows(包括WSL)和Linux操作系统。 Automatic Installation 我们建议使用create-next-app创建一个新的Next.js应用，它会自动为你设置一切。要创建一个项目，运行: npx create-next-app@latest 在安装时，您将看到以下提示: What is your project named? my-app Would you like to add TypeScript with this project? Y/N Would you like to use ESLint with this project? Y/N Would you like to use Tailwind CSS with this project? Y/N Would you like to use the `src/ directory` with this project? Y/N What import alias would you like configured? `@/*` 在提示之后，create-next-app将创建一个带有项目名称的文件夹，并安装所需的依赖项。 Note:  While you can use the Pages Router in your new project. We recommend starting new applications with the App Router to leverage React's latest features. 注意:虽然您可以在新项目中使用Pages Router。我们建议使用App Router启动新应用，以利用React的最新特性。 Manual Installation 要手动创建一个新的Next.js应用，请安装所需的软件包: npm install next@latest react@latest react-dom@latest Open package.json and add the following scripts: 打开的包。并添加以下脚本: package.json { "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" } } These scripts refer to the different stages of developing an application: 这些脚本指的是开发应用程序的不同阶段: dev: runs next dev to start Next.js in development mode. build: runs next build to build the application for production usage. start: runs next start to start a Next.js production server. lint: runs next lint to set up Next.js' built-in ESLint configuration. dev:运行next dev，在开发模式下启动next .js。 build:运行下一个构建以构建用于生产的应用程序。 start:运行next start命令启动next .js生产服务器。 lint:运行next lint来设置next .js的内置ESLint配置。 Create the app folder 接下来，创建一个app文件夹并添加一个布局。TSX和页面。tsx文件。这些将在用户访问应用程序的根目录时呈现。 Create a root layout inside app/layout.tsx with the required and tags: 在app/layout中创建一个根布局。使用所需的和标签的Tags: app/layout.tsx export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } Finally, create a home page app/page.tsx with some initial content: app/page.tsx export default function Page() { return

Hello, Next.js!

; } Good to know: If you forget to create layout.tsx, Next.js will automatically create this file for you when running the development server with next dev. 如果你忘记创建布局。在使用next dev运行开发服务器时，next .js将自动为您创建此文件。 Create the public folder You can optionally create a public folder to store static assets such as images, fonts, etc. Files inside public directory can then be referenced by your code starting from the base URL (/). 您可以选择创建一个公用文件夹来存储静态资产，如图像、字体等。然后，您的代码可以从基础URL(/)开始引用公共目录中的文件。 Run the Development Server Run npm run dev to start the development server. Visit http://localhost:3000 to view your application. Edit app/layout.tsx or app/page.tsx and save to see the updated result in your browser.