Follows #53115
- Replace `chalk` with `picocolors`
- Note that `chalk.hex('#007acc')` has been replaced with `picocolors.blue`
- Replace `glob` with `fast-glob@2.2.7`
- Not only does `fast-glob` is a faster drop-in replacement of `glob` with first-party `Promise`-based API support, but also `fast-glob` is already a dependency of `cpy`:
<img width="812" alt="image" src="https://github.com/vercel/next.js/assets/40715044/8efa24c4-5312-4b1c-bf8d-68255ca30b60">
Together the PR removes about `50 KiB` from the `create-next-app/dist/index.js`:
<img width="570" alt="image" src="https://github.com/vercel/next.js/assets/40715044/db2f3723-14cc-48ce-9cb2-8aa1fb1d5e95">
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
### What?
This PR introduces a new `--tailwind` flag to the `create-next-app` CLI,
to make it easier to bootstrap a Next.js app with Tailwind CSS
pre-configured. This is going to be the **default**. To opt-out of
Tailwind CSS, you can use the `--no-tailwind` flag.
### Why?
Tailwind CSS is one of the most popular styling solutions right now, and
we would like to make it easier to get started.
Currently, the closest you can come to this is by running `pnpm create
next-app -e with-tailwindcss` which will clone the
https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss
example. But that example is not configured for the App Router. This PR
will let you add Tailwind CSS to both `app/`, `pages/`, and start out
with TypeScript or JavaScript via the CLI prompts.
(Some community feedback
https://twitter.com/dev_jonaskaas/status/1632367991827443713,
https://twitter.com/samselikoff/status/1634662473331617794)
### How?
We are adding 4 new templates to the CLI bundle.
> Note: The styling is not pixel-perfect compared to the current
templates (using CSS modules) to require fewer overrides, but I tried to
match it as close as possible. Here are a few screenshots:
<details>
<summary><b>Current, light</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733372-9dba86fe-9191-471d-ad9f-ab904c47f544.png"/>
</details>
<details>
<summary><b>Tailwind (new), light</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733610-038d9d0f-634d-4b69-b5c2-a5056b56760c.png"/>
</details>
<details>
<summary><b>Current, dark, responsive</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224733790-9b4d730c-0336-4dbe-bc10-1cae1d7fd145.png"/>
</details>
<details>
<summary><b>Tailwind (new), dark, responsive</b></summary>
<img
src="https://user-images.githubusercontent.com/18369201/224734375-28384bbc-2c3a-4125-8f29-c102f3b7aa1d.png"/>
</details>
#### For reviewers
This introduces 4 new templates, with a very similar code base to the
original ones. To keep the PR focused, I decided to copy over duplicate
code, but we could potentially create a shared folder for files that are
the same across templates to somewhat reduce the CLI size. Not sure if
it's worth it, let me know. Probably fine for now, but something to
consider if we are adding more permutations in the future.
---
~Work remaining:~
- [x] app+ts
- [x] layout
- [x] dark mode
- [x] media queries
- [x] animations
- [x] app+js
- [x] pages+ts
- [x] pages+js
- [x] prompt/config
- [x] deprecate Tailwind CSS example in favor of CLI
- [x] update docs
- [x] add test
- [x] add [Prettier
plugin](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
Closes NEXT-772
Related #45814, #44286
Following up https://github.com/vercel/next.js/pull/42012 this adds an
additional prompt for include ESLint config/dependencies or not. As
discussed, this also removes the slow down from doing separate
`dependencies` and `devDependencies` installs since this separation is
no longer required now that we have `output: 'standalone'` which ensures
only actual necessary dependency files are used for production builds.
<details>
<summary>Before</summary>
https://user-images.githubusercontent.com/22380829/198953290-116b422d-4359-4aa9-9d82-b3265fde7b3f.mp4
</details>
<details>
<summary>After</summary>
https://user-images.githubusercontent.com/22380829/198953347-20dbf897-92b3-45ea-a9d2-cfb61622251d.mp4
</details>
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm build && pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Resubmitting this PR following this comment from Tim. This work has been done already and we can build off of it to get this in faster.
> Just to be clear we're planning to rework create-next-app to give you the option to choose between JavaScript or TypeScript so it'll solve this request. For `app` right now it'll stay TypeScript till that is implemented.
>
> _Originally posted by @timneutkens in https://github.com/vercel/next.js/discussions/41745#discussioncomment-3985833_
---
I added the `--ts, --typescript` flag to `create-next-app` in https://github.com/vercel/next.js/pull/24655, and since then I have seen it used very frequently, including in recent issues (such as https://github.com/vercel/next.js/issues/33314) and most Next.js tutorials on YouTube. I noticed the template logic added in this PR was also used to add the `appDir` configuration as well.
We discussed a while ago adding the following user flow:
- `create-next-app --js, --javascript` creates a JS project
- `create-next-app --ts, --typescript` creates a TS project
- `create-next-app [name]` (no `--js, --ts`) prompts the user to choose either JS or TS, with TS selected by default.
### Review
Adding support for appDir and refactoring the templates brought the pain-of-review up a bit, but it's not so bad when broken into increments.
The original 8-file diff is here:
1f47d9b0bf
And the PR that brought the diff up to 59 files (mostly owed to `app` template dirs and file structure refactors):
bd3ae4afd3 ([PR link](https://github.com/ctjlewis/next.js/pull/3/files))
### Demo
https://user-images.githubusercontent.com/1657236/198586216-4691ff4c-48d4-4c6c-b7c1-705c38dd0194.mov
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Adds a new template for `app/` via `--experimental-app` flag.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the
feature request has been accepted for implementation before opening a
PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have a helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The "examples guidelines" are followed from [our contributing
doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Previously our CLI assumed that when using an `--example` flag, the example contains a `package.json` file. There are examples though, like `with-docker-compose` which does not have one. In that case, we can simply clone the directory and show a success message.
<details>
<summary>
Full list of examples without <code>package.json</code>:
</summary>
<ul>
<li>custom-server</li>
<li>page-transitions</li>
<li>parameterized-routing</li>
<li>reproduction-template</li>
<li>with-chakra-ui-typescript</li>
<li>with-cookie-auth</li>
<li>with-docker-compose</li>
<li>with-dotenv</li>
<li>with-facebook-chat-plugin</li>
<li>with-firebase-authentication</li>
<li>with-firebase-authentication-serverless</li>
<li>with-glamorous</li>
<li>with-global-stylesheet</li>
<li>with-global-stylesheet-simple</li>
<li>with-graphql-faunadb</li>
<li>with-markdown</li>
<li>with-material-ui</li>
<li>with-next-auth</li>
<li>with-next-i18next</li>
<li>with-next-multilingual</li>
<li>with-next-routes</li>
<li>with-now-env</li>
<li>with-pretty-url-routing</li>
<li>with-prisma</li>
<li>with-redux-toolkit</li>
<li>with-redux-toolkit-typescript</li>
<li>with-sentry-simple</li>
<li>with-strict-csp-hash</li>
<li>with-styled-jsx-postcss</li>
<li>with-sw-precache</li>
<li>with-typescript-styled-components</li>
<li>with-universal-configuration-build-time</li>
<li>with-universal-configuration-runtime</li>
</ul>
</details>
Fixes#37884
In a follow-up PR, we can try to detect if an example contains a README.md file only, and if the example was moved, we could either try getting it from the new location or at least show a better message. (Eg.: using a magic comment that we can parse)
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
Makes it easier to detect why a network error occurred with the CLI or `next info`, based on https://github.com/vercel/next.js/issues/36344
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
* feat: support `pnpm` with `create-next-app`
* test: add `--use-pnpm` tests
* docs: mention `--use-pnpm` flag in docs
* test: remove `only`
* Update test/integration/create-next-app/index.test.ts
Co-authored-by: Steven <steven@ceriously.com>
* chore: add pnpm action setup to tests
* chore: use latest pnpm
* chore: debug
* chore: debug
* fix: fall back to `yarn` instead of `npm`
* test: run all tests
Co-authored-by: Steven <steven@ceriously.com>
This PR fixes the Fix the create-next-app Multiple calls to the function 'makeDir'.
Currently, no execution errors are generated, but redundant execution exists.
## Bug
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
## Feature
- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`
## Documentation / Examples
- [ ] Make sure the linting passes by running `yarn lint`
I used `create-next-app` to create a new fancy Next 12 app, ran `yarn build` and got a git diff. The tsconfig.json had a `incremental` added by next. Just running build shouldn't need I have uncommitted changes.
The following error occurred
when I created a project with the typecript template of createp-next-app
and did the 'next build'.
```shell
It looks like you're trying to use TypeScript but do not have the required package(s) installed.
Please install @types/node by running:
yarn add --dev @types/node
If you are not trying to use TypeScript, please remove the tsconfig.json file from your package root (and any TypeScript files in your pages directory).
```
This issue was resolved by adding @types/node.
So I added @types/node to the devDependencies of the create-next-app typecript template.
Hello! I was using `npx create-next-app --ts` to quickly bootstrap a basic next.js project with Typescript. It bothered me that I got git diff just from running `npm run build` inside the project, because the new notice in the `next-env.d.ts` file.
So I went ahead and updated the `next-env.d.ts` file in [`packages/create-next-app/templates/typescript`](fb67ce9864/packages/create-next-app/templates/typescript/next-env.d.ts) to be exactly how the file looks after running once. (7417ecc09c)
Then I realized that I could probably do the same for all the `next-env.d.ts` that are spread out in the many examples, to make running those examples after cloning them feel a bit smoother. (fb67ce9864)
> However I skipped the [`with-typescript-graphql`](40f85f6d95/examples/with-typescript-graphql) example since that [`next-env.d.ts`](40f85f6d95/examples/with-typescript-graphql/next-env.d.ts (L4-L9)) actually has changes and I couldn't even run `yarn build` in that example, so I'm not sure what will happen with the `next-env.d.ts`. Someone who _gets_ that example will have to fix it I suppose.
This PR introduces an improved developer experience when `next lint` is run for the first time.
### Current behavior
`eslint-config-next` is a required package that must be installed before proceeding with `next lint` or `next build`:
Although this has helped many developers start using the new ESLint config, this has also resulted in a few issues:
- Users are required to install the full config (`eslint-config-next`) even if they do not use it or use the Next.js plugin directly (`eslint-plugin-next`).
- #26348
- There's some confusion on why `eslint-config-next` needs to be installed or how it should be used instead of `eslint-plugin-next`.
- #26574
- #26475
- #26438
### New behavior
Instead of enforcing `eslint-config-next` as a required package, this PR prompts the user by asking what config they would like to start. This happens when `next lint` is run for the first time **and** if no ESLint configuration is detected in the application.
<img src="https://user-images.githubusercontent.com/12476932/124331177-e1668a80-db5c-11eb-8915-38d3dc20f5d4.gif" width="800" />
- The CLI will take care of installing `eslint` or `eslint-config-next` if either is not already installed
- Users now have the option to choose between a strict configuration (`next/core-web-vitals`) or just the base configuration (`next`)
- For users that decide to create their own ESLint configuration, or already have an existing one, **installing `eslint-config-next` will not be a requirement for `next lint` or `next build` to run**. A warning message will just show if the Next.js ESLint plugin is not detected in an ESLint config.
<img width="682" alt="Screen Shot 2021-06-25 at 3 02 12 PM" src="https://user-images.githubusercontent.com/12476932/123473329-6cc4a680-d5c6-11eb-9a57-d5c0b89a2732.png">
---
In addition, this PR also:
- Fixes#26348
- Updates documentation to make it more clear what approach to take for new and existing ESLint configurations
Fix#14902
I created a separated helper that wraps `fs.promises.mkdir` and sets `recursive` option to `true` by default.
I'm not sure if this is the right approach (maybe it should just call `fs.promises.mkdir` from `create-app.ts`?), any thoughts?
fix#12136
I add a prompt if there is an error when trying to download example files.
Maybe could be better to add an error class and in create-app.ts on every "console.error" trow a new Exception and manage it in catch. What you think ? 👯
* Rename to README-template.md
* Add yarn scripts
* Rewrite CNA README
* Forgot zeit link
* Simplify
* Update deploy doc
* Just link to the doc
* page is reloaded
* reload → update
* Deploy updates
* Initialize Git repo on app creation
This PR initializes a Git repository after Create Next App runs.
We ensure the app was not created in an already-existing Git or Mercurial repo.
Failures of setup (no Git installed) do not fail the application bootstrapping.
Closes#9077 (replaces)
* Add test
* Update index.test.js
* Completely rewrite Create Next App
* Sort imports
* Show what package manager is being used
* Fix project name suggestion
* Update tests for new implementation
* Use normal prepublish command for on-install
* Upgrade Node version
* Switch to 8.16
* Disable v8 cache
* Swap out update check package and fix CLI boot
