Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Refactor next and create-next-app CLI pages #68899

Merged
merged 14 commits into from
Aug 22, 2024
12 changes: 6 additions & 6 deletions docs/01-getting-started/01-installation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ System Requirements:

## Automatic Installation

We recommend starting a new Next.js app using [`create-next-app`](/docs/app/api-reference/create-next-app), which sets up everything automatically for you. To create a project, run:
We recommend starting a new Next.js app using [`create-next-app`](/docs/app/api-reference/cli/create-next-app), which sets up everything automatically for you. To create a project, run:

```bash filename="Terminal"
npx create-next-app@latest
Expand All @@ -35,7 +35,7 @@ Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*
```

After the prompts, [`create-next-app`](/docs/app/api-reference/create-next-app) will create a folder with your project name and install the required dependencies.
After the prompts, [`create-next-app`](/docs/app/api-reference/cli/create-next-app) will create a folder with your project name and install the required dependencies.

If you're new to Next.js, see the [project structure](/docs/getting-started/project-structure) docs for an overview of all the possible files and folders in your application.

Expand Down Expand Up @@ -67,10 +67,10 @@ Open your `package.json` file and add the following `scripts`:

These scripts refer to the different stages of developing an application:

- `dev`: runs [`next dev`](/docs/app/api-reference/next-cli#development) to start Next.js in development mode.
- `build`: runs [`next build`](/docs/app/api-reference/next-cli#build) to build the application for production usage.
- `start`: runs [`next start`](/docs/app/api-reference/next-cli#production) to start a Next.js production server.
- `lint`: runs [`next lint`](/docs/app/api-reference/next-cli#lint) to set up Next.js' built-in ESLint configuration.
- `dev`: runs [`next dev`](/docs/app/api-reference/cli/next#next-dev-options) to start Next.js in development mode.
- `build`: runs [`next build`](/docs/app/api-reference/cli/next#next-build-options) to build the application for production usage.
- `start`: runs [`next start`](/docs/app/api-reference/cli/next#next-start-options) to start a Next.js production server.
- `lint`: runs [`next lint`](/docs/app/api-reference/cli/next#next-lint-options) to set up Next.js' built-in ESLint configuration.

### Creating directories

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,4 +47,4 @@ For static metadata files, such as `robots.txt`, `favicon.ico`, etc, you should
> Good to know:
>
> - The directory must be named `public`. The name cannot be changed and it's the only directory used to serve static assets.
> - Only assets that are in the `public` directory at [build time](/docs/app/api-reference/next-cli#build) will be served by Next.js. Files added at request time won't be available. We recommend using a third-party service like [Vercel Blob](https://vercel.com/docs/storage/vercel-blob?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) for persistent file storage.
> - Only assets that are in the `public` directory at [build time](/docs/app/api-reference/cli/next#next-build-options) will be served by Next.js. Files added at request time won't be available. We recommend using a third-party service like [Vercel Blob](https://vercel.com/docs/storage/vercel-blob?utm_source=next-site&utm_medium=docs&utm_campaign=next-website) for persistent file storage.
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ The `next/core-web-vitals` rule set is enabled when `next lint` is run for the f

`next/core-web-vitals` updates `eslint-plugin-next` to error on a number of rules that are warnings by default if they affect [Core Web Vitals](https://web.dev/vitals/).

> The `next/core-web-vitals` entry point is automatically included for new applications built with [Create Next App](/docs/app/api-reference/create-next-app).
> The `next/core-web-vitals` entry point is automatically included for new applications built with [Create Next App](/docs/app/api-reference/cli/create-next-app).

### TypeScript

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ description: Customize the pages that will be exported as HTML files when using

</details>

`exportPathMap` allows you to specify a mapping of request paths to page destinations, to be used during export. Paths defined in `exportPathMap` will also be available when using [`next dev`](/docs/app/api-reference/next-cli#development).
`exportPathMap` allows you to specify a mapping of request paths to page destinations, to be used during export. Paths defined in `exportPathMap` will also be available when using [`next dev`](/docs/app/api-reference/cli/next#next-dev-options).

Let's start with an example, to create a custom `exportPathMap` for an app with the following pages:

Expand Down
85 changes: 85 additions & 0 deletions docs/02-app/02-api-reference/06-cli/create-next-app.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
---
title: create-next-app
description: Create Next.js apps using one command with the create-next-app CLI.
---

{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}

The `create-next-app` CLI allow you to quickly create a new Next.js application using the default template or an [example](https://github.com/vercel/next.js/tree/canary/examples) from a public Github repository. It is the easiest way to get started with Next.js.
delbaoliveira marked this conversation as resolved.
Show resolved Hide resolved

Basic usage:

```bash filename="Terminal"
npx create-next-app@latest [project-name] [options]
```

## Reference

The following options are available:

| Options | Description |
| --------------------------------------- | --------------------------------------------------------------- |
| `-h` or `--help` | Show all available options |
| `-v` or `--version` | Output the version number |
| `--no-*` | Negate default options. E.g. `--no-eslint` |
| `--ts` or `--typescript` | Initialize as a TypeScript project (default) |
| `--js` or `--javascript` | Initialize as a JavaScript project |
| `--tailwind` | Initialize with Tailwind CSS config (default) |
| `--eslint` | Initialize with ESLint config |
| `--app` | Initialize as an App Router project |
| `--src-dir` | Initialize inside a `src/` directory |
| `--turbo` | Enable Turbopack by default for development |
| `--import-alias <alias-to-configure>` | Specify import alias to use (default "@/\*") |
| `--empty` | Initialize an empty project |
| `--use-npm` | Explicitly tell the CLI to bootstrap the application using npm |
| `--use-pnpm` | Explicitly tell the CLI to bootstrap the application using pnpm |
| `--use-yarn` | Explicitly tell the CLI to bootstrap the application using Yarn |
| `--use-bun` | Explicitly tell the CLI to bootstrap the application using Bun |
| `-e` or `--example [name] [github-url]` | An example to bootstrap the app with |
| `--example-path <path-to-example>` | Specify the path to the example separately |
| `--reset-preferences` | Explicitly tell the CLI to reset any stored preferences |
| `--skip-install` | Explicitly tell the CLI to skip installing packages |
| `--yes` | Use previous preferences or defaults for all options |

## Examples

## With the default template
delbaoliveira marked this conversation as resolved.
Show resolved Hide resolved

To create a new app using the default template, run the following command in your terminal:

```bash filename="Terminal"
npx create-next-app@latest
```

You will then be asked the following prompts:

```txt filename="Terminal"
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`? No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
```

Once you've answered the prompts, a new project will be created with your chosen configuration.

## With an official Next.js example

To create a new app using an official Next.js example, use the `--example` flag with the following command:
delbaoliveira marked this conversation as resolved.
Show resolved Hide resolved

```bash filename="Terminal"
npx create-next-app@latest --example [your-project-name] [example-name]
```

You can view a list of all available examples along with setup instructions in the [Next.js repository](https://github.com/vercel/next.js/tree/canary/examples).

## With any public Github example

To create a new app using any public Github example, use the `--example` option with the Github repo's URL. For example:

```bash filename="Terminal"
npx create-next-app@latest --example [your-project-name] "https://github.com/.../"
```
11 changes: 11 additions & 0 deletions docs/02-app/02-api-reference/06-cli/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
title: CLI
description: API Reference for the Next.js Command Line Interface (CLI) tools.
---

{/* The content of this doc is shared between the app and pages router. You can use the `<PagesOnly>Content</PagesOnly>` component to add content that is specific to the Pages Router. Any shared content should not be wrapped in a component. */}

Next.js comes with **two** Command Line Interface (CLI) tools:

- **`create-next-app`**: Quickly create a new Next.js application using the default template or an [example](https://github.com/vercel/next.js/tree/canary/examples) from a public Github repository.
delbaoliveira marked this conversation as resolved.
Show resolved Hide resolved
- **`next`**: Run the Next.js development server, build your application, and more.
delbaoliveira marked this conversation as resolved.
Show resolved Hide resolved
Loading
Loading