ec25b4742b
This adds handling for auto-detecting TypeScript being added to a project and installing the necessary dependencies instead of printing the command and requiring the user run the command. We have been testing the auto install handling for a while now with the `next lint` command and it has worked out pretty well. This also adds HMR handling for `jsconfig.json`/`tsconfig.json` in development so if the `baseURL` or `paths` configs are modified it doesn't require a dev server restart for the updates to be picked up. This also corrects our required dependencies detection as previously an incorrect `paths: []` value was being passed to `require.resolve` causing it to fail in specific situations. Closes: https://github.com/vercel/next.js/issues/36201 ### `next build` before https://user-images.githubusercontent.com/22380829/186039578-75f8c128-a13d-4e07-b5da-13bf186ee011.mp4 ### `next build` after https://user-images.githubusercontent.com/22380829/186039662-57af22a4-da5c-4ede-94ea-96541a032cca.mp4 ### `next dev` automatic setup and HMR handling https://user-images.githubusercontent.com/22380829/186039678-d78469ef-d00b-4ee6-8163-a4706394a7b4.mp4 ## Bug - [x] Related issues linked using `fixes #number` - [x] Integration tests added - [x] Errors have helpful link attached, see `contributing.md` |
||
---|---|---|
.. | ||
helpers | ||
templates | ||
create-app.ts | ||
index.ts | ||
package.json | ||
README.md | ||
tsconfig.json |
Create Next App
The easiest way to get started with Next.js is by using create-next-app
. This CLI tool enables you to quickly start building a new Next.js application, with everything set up for you. You can create a new app using the default Next.js template, or by using one of the official Next.js examples. To get started, use the following command:
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
Or, for a TypeScript project:
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript
To create a new app in a specific folder, you can send a name as an argument. For example, the following command will create a new Next.js app called blog-app
in a folder with the same name:
npx create-next-app@latest blog-app
# or
yarn create next-app blog-app
# or
pnpm create next-app blog-app
Options
create-next-app
comes 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 to run
yarn create next-app
- --use-pnpm - Explicitly tell the CLI to bootstrap the app using pnpm. To bootstrap using pnpm we recommend running
pnpm create next-app
Why use Create Next App?
create-next-app
allows 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
(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.