创建 Next App

开始使用Next.js最简单的方法是使用“create-next-app”。这个CLI工具使您能够快速开始构建一个新的Next.js应用程序，并为您设置好一切。你可以使用默认的Next.js模板，或者使用一个“官方的Next.js示例”来创建一个新的应用程序。要开始，使用以下命令:

npx create-next-app@latest
# or
yarn create next-app

You can create a TypeScript project with the --ts, --typescriptflag:

npx create-next-app@latest --ts
# or
yarn create next-app --typescript

Options

create-next-appcomes with the following options:

• --ts, --typescript- Initialize as a TypeScript project.
• **-e, --example name]|[github-url]**- An example to bootstrap the app with. You can use an example name from the [Next.js repo or a GitHub URL. The URL can use any branch and/or subdirectory.
• --example-path [path-to-example]- In a rare case, your GitHub URL might contain a branch name with a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar). In this case, you must specify the path to the example separately: --example-path foo/bar
• --use-npm- Explicitly tell the CLI to bootstrap the app using npm. To bootstrap using yarn we recommend running yarn create next-app

Why use Create Next App?

create-next-appallows you to create a new Next.js app within seconds. It is officially maintained by the creators of Next.js, and includes a number of benefits:

• Interactive Experience: Running npx create-next-app@latest(with no arguments) launches an interactive experience that guides you through setting up a project.
• Zero Dependencies: Initializing a project is as quick as one second. Create Next App has zero dependencies.
• Offline Support: Create Next App will automatically detect if you're offline and bootstrap your project using your local package cache.
• Support for Examples: Create Next App can bootstrap your application using an example from the Next.js examples collection (e.g. npx create-next-app --example api-routes).
• Tested: The package is part of the Next.js monorepo and tested using the same integration test suite as Next.js itself, ensuring it works as expected with every release.

Related

For more information on what to do next, we recommend the following sections:

PagesLearn more about what pages are in Next.js. CSS SupportUse the built-in CSS support to add custom styles to your app. CLILearn more about the Next.js CLI.