rsnext/packages/create-next-app
Balázs Orbán 5448c234d6
fix(cli): handle Tailwind CSS + src/ correctly (#47238)
### What?

- [x] fixes a bug in the CLI with the combination of `--tailwind` and
`--src-dir` flags.
- [x] fixes Tailwind CSS config when `--src-dir` is set
- [x] respect `NEXT_TEST_SKIP_CLEANUP` in test utils

### Why?

`pnpm create next-app@canary --tailwind --src-dir` should not fail.

### How?

We introduced the `app-tw` and `default-tw` templates, so we need to
respect them when working with files (in this case, the CLI was
erroneously assuming that if `template !== "app"` it must be a pages
template.)

I also noticed that the `tailwind.config.js` file need to also respect
`--src-dir` by prefixing the paths in `content`

Fixes #47236
fix NEXT-838 ([link](https://linear.app/vercel/issue/NEXT-838))

Related: #46927, #47276

---------

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2023-03-20 14:21:29 -07:00
..
helpers Fix nested example setup with create-next-app (#45390) 2023-01-29 11:54:28 -08:00
templates fix(cli): handle Tailwind CSS + src/ correctly (#47238) 2023-03-20 14:21:29 -07:00
create-app.ts feat(cli): introduce --tailwind flag (#46927) 2023-03-16 16:06:27 +01:00
index.ts feat(cli): introduce --tailwind flag (#46927) 2023-03-16 16:06:27 +01:00
package.json v13.2.5-canary.9 2023-03-20 22:06:42 +01:00
README.md docs(create-next-app): copy changes from #42012 to package-level README (#42217) 2022-10-31 00:02:02 -07:00
tsconfig.json Update CNA build target in tsconfig (#25780) 2021-06-08 09:32:29 +02:00

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:

Interactive

You can create a new project interactively by running:

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

You will be asked for the name of your project, and then whether you want to create a TypeScript project:

✔ Would you like to use TypeScript with this project? … No / Yes

Select Yes to install the necessary types/dependencies and create a new TS project.

Non-interactive

You can also pass command line arguments to set up a new project non-interactively. See create-next-app --help:

create-next-app <project-directory> [options]

Options:
  -V, --version                      output the version number
  --ts, --typescript

    Initialize as a TypeScript project. (default)

  --js, --javascript

    Initialize as a JavaScript project.

  --use-npm

    Explicitly tell the CLI to bootstrap the app using npm

  --use-pnpm

    Explicitly tell the CLI to bootstrap the app using pnpm

  -e, --example [name]|[github-url]

    An example to bootstrap the app with. You can use an example name
    from the official 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

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@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.