Fixes#46288
Makes TypeScript behavior match runtime by no longer allowing files to
be imported absolutely relative to project root without using a relative
path or a path alias. This changes behavior introduced in
https://github.com/vercel/next.js/pull/44672 which also added the paths
alias `@/*: ["./*"]`, which works without a baseUrl.
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have a helpful link attached, see
[`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.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>
Let's open the deploy link in a new window so the link isn't blocked
when running an an iframe, such as Stackblitz.
Previously, this would print the following error:
> Refused to display 'https://vercel.com/' in a frame because it set
'X-Frame-Options' to 'deny'
## 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)
* ignore all .env files in default template
* ignore all .env files in typescript template
* ignore all local .env files in default template
Co-authored-by: Balázs Orbán <info@balazsorban.com>
* ignore all local .env files in typescript template
Co-authored-by: Balázs Orbán <info@balazsorban.com>
Enable editors to suggest properties for the config object. Also let TypeScript check for type errors in the configuration when using TypeScript
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
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`:
![image](https://user-images.githubusercontent.com/12476932/123468791-43088100-d5c0-11eb-9ad0-5beb80b6c968.png)
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
Follow PR to #23887 to add next/image.
Only other change was wrapping the image in a span to allow for the margin that was previously on the actual `<img>`
## Documentation / Examples
- [x] Make sure the linting passes
Adds brief summary in Getting Started to explain the `pages/api` functionality. The intention here is reduce confusion to new users of Next.js as to what `pages/api` is and how it works.
* Add initial support for new env config file
* Fix serverless processEnv call when no env is provided
* Add missing await for test method
* Update env config to .env.json and add dotenv loading
* ncc dotenv package
* Update type
* Update with new discussed behavior removing .env.json
* Update hot-reloader createEntrypoints
* Make sure .env is loaded before next.config.js
* Add tests for all separate .env files
* Remove comments
* Add override tests
* Add test for overriding env vars based on local environment
* Add support for .env.test
* Apply suggestions from code review
Co-Authored-By: Joe Haddad <joe.haddad@zeit.co>
* Use chalk for env loaded message
* Remove constant as it’s not needed
* Update test
* Update errsh, taskr, and CNA template ignores
* Make sure to only consider undefined missing
* Remove old .env ignore
* Update to not populate process.env with loaded env
* Add experimental flag and add loading of global env values
Co-authored-by: Tim Neutkens <timneutkens@me.com>
Co-authored-by: Joe Haddad <joe.haddad@zeit.co>
* 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