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: runsnext devto start Next.js in development mode.build: runsnext buildto build the application for production usage.start: runsnext startto start a Next.js production server.lint: runsnext lintto 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 <html> and <body> tags:
在app/layout中创建一个根布局。使用所需的和标签的Tags:
app/layout.tsx export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body>{children}</body> </html> ); }
Finally, create a home page app/page.tsx with some initial content:
app/page.tsx export default function Page() { return <h1>Hello, Next.js!</h1>; }
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 devto start the development server. - Visit
http://localhost:3000to view your application. - Edit
app/layout.tsxorapp/page.tsxand save to see the updated result in your browser.
