跳转至

一看就会的Next.js App Router版 -- Getting Started

Installation

系统需求 - Node.js 16.8及以上版本。 - 支持macOS、Windows(包括WSL)和Linux操作系统。

Automatic Installation

我们建议使用create-next-app创建一个新的Next.js应用，它会自动为你设置一切。要创建一个项目，运行:

npx create-next-app@latest

在安装时，您将看到以下提示:

1
2
3
4
5
6
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 

1
2
3
4
5
6
7
8
{
  "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文件。这些将在用户访问应用程序的根目录时呈现。 app/ -> 对应网页路径 / - layout.tsx - page.tsx

Create a root layout inside app/layout.tsx with the required <html> and <body> tags: 在app/layout中创建一个根布局。使用所需的和标签的Tags:

app/layout.tsx 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
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 

1
2
3
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

  1. Run npm run dev to start the development server.
  2. Visit http://localhost:3000 to view your application.
  3. Edit app/layout.tsx or app/page.tsx and save to see the updated result in your browser.

下一课 路由

Any text/graphics/videos and other articles on this website that indicate "Source: xxx" are reprinted on this website for the purpose of transmitting more information, which does not mean that we agree with their views or confirm the authenticity of their content. If you are involved in the content of the work, copyright and other issues, please contact this website, we will delete the content in the first time!
Author:
Source: https://developer.aliyun.com/article/1262206