Commit graph

2441 commits

Author SHA1 Message Date
Tim Neutkens
e74de1a46c
Clarify app and pages file conflicting files (#42415)
Improvement to how the `app` and `pages` files conflict is shown.
Especially the last log line `"pages/" - "app/"` made it seem like you
should remove the `pages` folder altogether. This was a bug in how the
`''` case was displayed. After having a look at this I went further and
added exactly which file caused the conflict given that `app` allows you
to create `app/(home)/page.js` and such it saves some digging for what
the actual conflicting file is. Similarly in `pages` both
`pages/dashboard/index.js` and `pages/dashboard.js` are possible.

Before:
```
error - Conflicting app and page files were found, please remove the conflicting files to continue:
error -   "pages/another" - "app/another"
error -   "pages/hello" - "app/hello"
error -   "pages/" - "app/"
```

After:
```
error - Conflicting app and page files were found, please remove the conflicting files to continue:
error -   "pages/another.js" - "app/another/page.js"
error -   "pages/index.js" - "app/page.js"
error -   "pages/hello.js" - "app/hello/page.js"
```

## 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)

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-11-03 12:50:39 -07:00
JJ Kasper
5da108bc19
Update default eslint choice for CNA setup (#42371)
This ensures we continue to default to ESLint be configured for new
projects so that our lint checks are enabled for new projects.

## 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)
2022-11-02 20:17:37 -07:00
OJ Kwon
5654cae2d7
feat(next/mdx): support experimental mdx-rs loader (#41919)
<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

This PR implements a configuration option in `next.config.js` to support
for rust-based MDX compiler (https://github.com/wooorm/mdxjs-rs).
Currently it is marked as experimental, as mdx-rs and loader both may
need some iteration to fix regressions.

When a new experimental flag is set (`mdxRs: true`), instead of using
`@mdx/js` loader `next/mdx` loads a new webpack loader instead.
Internally, it mostly mimics mdx/js's loader behavior, however actual
compilation will be delegated into next/swc's binding to call mdx-rs's
compiler instead.

I choose to use next-swc to expose its binding function, as mdx-rs
internally uses swc already and creating new binary can double up
bytesize (with all the complex processes of publishing new package).

## 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)
2022-11-02 18:24:05 -07:00
JJ Kasper
cd982d508b
Update flakey SIGINT test (#42370)
x-ref:
https://github.com/vercel/next.js/actions/runs/3380021994/jobs/5612393059
2022-11-02 11:55:23 -07:00
JJ Kasper
2a9e2f18e3
Update dev process exit handling (#42367)
Follow-up to https://github.com/vercel/next.js/pull/42255

## 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)
2022-11-02 11:09:56 -07:00
Wyatt Johnson
6c7e76b551
Hybrid App Hooks Support (#41767)
This adapts the new client hooks of `usePathname`, `useSearchParams`,
and `useRouter` to work within the `pages/` directory to aid users
attempting to migrate shared components over to the `app/` directory.

> **Exception:**
> When the pages router is not ready, `useSearchParams` will return an
empty `URLSearchParams`. This mirrors the behavior seen in the `pages/`
directory today in that `router.query` is not available until the client
hydrates.

This also adds a new option for `useRouter` to bring it line with the
correct typings with the app directory. By default, calling
`useRouter()` will return the type `NextRouter | null` to represent what
you get when you call it from a component originating from the app
directory. If you want to instead force it to return `NextRouter` as it
does today, you can pass a boolean into the `useRouter` call as such:

```ts
const router = useRouter()     // typeof router === NextRouter | null
const router = useRouter(true) // typeof router === NextRouter
```

This change is designed to ease the incremental adoption of app.
2022-10-31 20:13:27 -07:00
JJ Kasper
96696c2d3b
Add event for dev process stop (#42255)
x-ref: [slack
thread](https://vercel.slack.com/archives/C02HEJASXGD/p1667173179573409?thread_ts=1667165920.338789&channel=C02HEJASXGD&message_ts=1667173179.573409)

## 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)
2022-10-31 12:19:22 -07:00
JJ Kasper
b7ea0a5abe
Add prompt for ESLint to CNA (#42218)
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)
2022-10-31 08:51:50 -07:00
Shu Ding
2280a2dd56
Fix CSS modules imports from outside of the root directory (#42106)
Fixes #41856. There is no way to apply those loader rules to specific
directories, especially when `transpileModules` is used. This PR changes
that to be based on the issuer layer.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] 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)

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-10-31 08:44:48 -07:00
C. Lewis
389c77f205
feat(create-next-app): JS/TS prompt (with appDir support); enhanced testing (#42012)
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>
2022-10-31 05:43:39 +00:00
JJ Kasper
86b3e7d5b1
Ensure we detect config correctly with turbo flag (#42201)
Ensures we handle the `configFileName` field properly from
`next.config.js`.

## 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)
2022-10-30 20:06:11 -07:00
Steven
676be08d32
Warn when legacy prop detected on next/image (#42102)
Instead of hard error, we can try to convert legacy props to the new
props and print a warning.

We still recommend upgrading by running one (or both) codemods because
the new component no longer has a wrapping `<span>`.

<img width="616" alt="image"
src="https://user-images.githubusercontent.com/229881/198756393-7d981686-f4db-485b-9f5f-1ff614d35959.png">

Read more: https://nextjs.org/docs/messages/next-image-upgrade-to-13
2022-10-29 22:22:08 -07:00
JJ Kasper
dc3cd95017
Fix turbo css-modules test (#42103)
fixes:
https://github.com/vercel/next.js/actions/runs/3348828100/jobs/5548326347
2022-10-28 17:39:48 -07:00
teobler
e2e1048b71
fix: Data URL images with 'fill' are always triggering 'missing sizes' warning (#42030)
fixes https://github.com/vercel/next.js/issues/42006

this issue occurred because images with `data url` src start with `blob`
and `data` will be mark as `unoptimized`, then its `sizes` will be
assigned with `undefined`.

I just skip the check for `data url` images, if there is any better
solution, we can have a discuss here.

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added

- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] 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: Steven <steven@ceriously.com>
2022-10-28 18:08:04 -04:00
Hannes Bornö
4b004957fe
Google fonts multiple weights & styles (#42008)
Enable using multiple weights and styles in the same google font loader
call.

## 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)
2022-10-27 15:25:57 -07:00
Steven
191710ddfe
Show error message when using legacy props on new next/image (#41930)
This PR shows a better error message when using legacy props on new
`next/image` (introduced in Next.js 13) and makes the codemod more
discoverable.
2022-10-27 12:17:28 -04:00
OJ Kwon
edba9396a8
test(dev): support to run test with --turbo (#41908)
<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

This PR updates test fixture setup to pass `--turbo` when devserver is
initiated. Due to lot of existing tests are not working with turbopack
yet, changes are focused to setup necessary logics for the fixtures
only. With this change we can create some sort of burndown list to fix
forward.

## 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)
2022-10-26 22:56:18 -07:00
Tobias Koppers
b69dcb5dd2
Make ship happen (#41776)
The Snozzberries taste like Snozzberries...!

Co-authored-by: OJ Kwon <kwon.ohjoong@gmail.com>
Co-authored-by: LongYinan <lynweklm@gmail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Jared Palmer <jared@jaredpalmer.com>
2022-10-25 02:56:26 -07:00
Janicklas Ralph
16c7480fcf
Updating avg width metrics for google fonts (#41755)
Updating the average with using the string
"aaabcdeeeefghiijklmnnoopqrrssttuvwxyz "

<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:


## 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: Hannes Bornö <hannes.borno@vercel.com>
2022-10-24 21:17:32 -07:00
ahhshm
8678865907
feat: set a better type for the default image loader (#41639)
## 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: Steven <229881+styfle@users.noreply.github.com>
2022-10-24 23:59:07 +00:00
Steven
b17701372c
Add error if app detected but config is missing (#41696)
Previously, creating the `app` dir without enabling the config would
print an error about `pages` missing:

> Couldn't find a `pages` directory. Please create one under the project
root

This PR prints a better error message:

> The `app` dir is experimental. Please add `{experimental:{appDir:
true}}` to your `next.config.js` to enable it

Co-authored-by: Balázs Orbán <info@balazsorban.com>
2022-10-24 13:42:11 -07:00
Javi Velasco
95af245498
Fail on prerendering with dynamic error config (#41707)
This PR adds the ability to fail on pre-rendering for a page configured
with `dynamic="error"`
2022-10-23 23:08:15 -07:00
Steven
b411567792
Print error when next dev has conflicting app & page (#41656)
This PR prints an error when the `app` and `pages` directory contain the
same route.

## build error
<img width="904" alt="image"
src="https://user-images.githubusercontent.com/229881/197424839-67dac580-1e1d-4c31-b769-112f2f38b06e.png">

## dev error
<img width="957" alt="image"
src="https://user-images.githubusercontent.com/229881/197426784-9b5041d9-b6d0-48d5-8ce5-b759bd9e4438.png">

Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-10-23 20:09:59 -07:00
JJ Kasper
4ce259fa3e
Update to handle correct react version with app (#41658)
Add auto install handling for the correct react experimental version for
app
2022-10-22 13:29:00 -07:00
Steven
d260ad2adf
Change data-nimg attribute on next/image (#41612)
For `next/legacy/image`, the `data-nimg` has the `layout` prop value. 

Since `next/image` doesn't have a `layout` prop, we can use `fill` when
the fill prop is used or fallback to `1`.
2022-10-22 11:58:08 -07:00
Tim Neutkens
14c9376899
BREAKING CHANGE: Remove React 17 (#41629)
Next.js 13 will require React 18.

In this PR I've only updated the peerDependency and removed the test runs in GH actions. Further cleanup will follow later, this allows us to remove the code supporting it later.



## 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: Jiachi Liu <4800338+huozhi@users.noreply.github.com>
2022-10-21 22:20:36 +00:00
Steven
7102050ec7
Add support for images.loaderFile config (#41585)
This PR adds a new configure property, `images.loaderFile` that allow
you to define a path to a file with an exported image loader function.

This is useful when migrating from `next/legacy/image` to `next/image`
because it lets you configure the loader for every instance of
`next/image` once, similar to the legacy "built-in loaders".
2022-10-21 12:31:53 -07:00
Janicklas Ralph
56b097a8fb
Updating size-adjust calculation (#41406)
<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:




## 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)
-->

Updating size-adjust calc to use azAvgWidth instead of xAvgCharWidth

Co-authored-by: Hannes Bornö <hannes.borno@vercel.com>
Co-authored-by: Balázs Orbán <info@balazsorban.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-10-20 10:58:26 -07:00
Steven
fe762d329f
Fix next/image svg blur placeholder with fill (#41573)
This PR fixes two bugs:

- Fixes #40419 
- Fixes #41393 

The first is when the aspect ratio of the `width` and `height` does not
match the aspect ratio of the `blurDataURL` provided. This can result in
artifacts around the edges. The solution is to add
`preserveAspectRatio="none"`.

The second is when there is no `width` or `height` provided (which is
normal when using `fill`) so the viewBox was undefined. This can also
cause artifacts around the edges. The solution is to change the blur
technique from gaussian to css filter, similar to `next/legacy/image`.

Note: css blur might be [slower in
firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=925025) which is
why we'll only use it for this corner case.
2022-10-19 13:21:41 -07:00
Steven
cff9fc9d74
BREAKING CHANGE: Remove browsersListForSwc and change default to legacyBrowsers: false (#41529)
Remove `browsersListForSwc` since it is enabled by default now, and disable `legacyBrowsers` by default.

This PR also bumps the default browserslist to the following:

- Chrome 64+
- Edge 79+
- Firefox 67+
- Opera 51+
- Safari 12+

See related RFC:
- Closes #33227 

Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-19 01:38:39 +00:00
Steven
9c5bb5bfe9
BREAKING CHANGE: Remove target: serverless (#41495)
The `target: serverless` config was deprecated a year ago starting in
[Next.js 12](https://nextjs.org/blog/next-12).

Tests were disabled in #41252 so we can now remove `target: serverless`
and all usage of `target` in `next.config.js`.

Co-authored-by: Balázs Orbán <info@balazsorban.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-10-18 09:47:13 -07:00
Tim Neutkens
f260328900
BREAKING CHANGE: Enable newNextLinkBehavior (#41459)
- Enable newNextLinkBehavior. See #36436 
- Run next/link codemod on test suite

Note that from when this lands on apps trying canary will need to run
the new-link codemod in order to upgrade.
Ideally we have to detect `<a>` while rendering the new link and warn
for it.

Co-authored-by: Steven <steven@ceriously.com>
2022-10-17 21:20:28 -04:00
JJ Kasper
0d376b3684
Update flakey dev AMP tests (#41428)
These tests have been flakey for a quite a while and this blocks changes
that are unrelated so this skips them for now.

x-ref:
https://github.com/vercel/next.js/actions/runs/3250190671/jobs/5333599972
x-ref:
https://github.com/vercel/next.js/actions/runs/3219413821/jobs/5264815514
2022-10-14 12:04:55 -07:00
Steven
241195ddd6
BREAKING CHANGE: Rename next/image to next/legacy/image & rename next/future/image to next/image (#41399)
This PR introduces breaking changes by renaming components.

- Rename `next/image` to `next/legacy/image`
- Rename `next/future/image` to `next/image`

The diff is very confusing because both components are very similar so git got confused.
2022-10-14 01:59:22 +00:00
Néstor
5cd31e41ca
Add npm to create-next-app environment package manager parser (#41279)
Gracefully parse the environment package manager when calling
`create-next-app` instead of passing extra arguments.

Reference: #41090

## 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`

Co-authored-by: Balázs Orbán <info@balazsorban.com>
2022-10-13 14:34:55 -07:00
Steven
7fc301d0b5
Fix onLoad prop in next/future/image (#41374)
Fixes a bug in `next/future/image` where `onLoad` might not be called.
This is the same workaround we added for `onError`.
2022-10-12 20:36:33 -07:00
Meno Abels
6652d783e4
proper error if middleware or api/route not return a Response (#41336)
## Bug

The error which is thrown if the fetch method returns not a falsy or
Response value
is misleading.

Co-authored-by: Balázs Orbán <info@balazsorban.com>
2022-10-12 14:02:25 +02:00
Steven
9e1d04dd93
Add pretty error when image import is invalid format (#41267)
This PR improves the error message when an invalid image is imported. It
also ensures the page that imported the image is displayed.

### Before

<img width="1062" alt="image"
src="https://user-images.githubusercontent.com/229881/194674177-70f4ae73-64c9-497f-8e20-098f949a4219.png">


### After

<img width="1002" alt="image"
src="https://user-images.githubusercontent.com/229881/194716285-27dd3455-60a9-440f-a50e-eff8d49e764b.png">

Co-authored-by: Balázs Orbán <info@balazsorban.com>
2022-10-11 18:22:13 +02:00
JJ Kasper
35308c668e
Update middleware query hydration handling (#41243)
This updates to skip the data request done during query hydration when
middleware is present as it was mainly to gather query params from any
potential rewrites in middleware although this is usually not needed for
static pages and the context can be gathered in different ways on the
client.

x-ref: [slack
thread](https://vercel.slack.com/archives/C045FKE5P51/p1665082474010149)

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`
2022-10-10 12:58:18 -07:00
Tim Neutkens
eb629c15ca
Skip serverless/serverless-trace target tests (#41252) 2022-10-07 18:57:22 +02:00
Damien Simonin Feugas
bef709bc74
fix(middleware): 'instanceof Function' is dynamic code false-positive (#41249)
## 🐛 What's in there?

`foo instanceof Function` is wrongly considered as Dynamic code evaluation by our static analyzer.
This PR fixes it.

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] Errors have a helpful link attached, see `contributing.md`

## 🧪 How to reproduce?

1. Create a simple repro in `examples` folder:
   ```js
   // examples/instance-of-function/pages/index.js
   export default function Home() {
     return <h1>home</h1>
   }
   
   // examples/instance-of-function/middleware.js
   import { NextResponse } from 'next/server'
   
   export default async function handler() {
     console.log('is arrow a function?', (() => {}) instanceof Function)
     return NextResponse.next()
   }
   ```
1. build with next `pnpm next build examples/instance-of-function`
   > the build fails
1. rebuild next to include PR's fix `pnpm build`
1. build with new next `pnpm next build examples/instance-of-function`
   > the build works

## 📔 Notes to reviewers

`hooks.expression.for(`${prefix}Function`).tap(NAME, handleExpression)` is actually legacy code from the original implementation. It's used when finding `Function` regardless of how it is used. We only want to find `new Function()` or `Function()`, which `hooks.calls` and `hooks.new` are covering.

`eval instanceof Function` is perfectly legit code on the edge, despite its uselessness :lol-think: 

Because we got multiple people asking "how do I relax this error when my code contains unreachable dynamic code evaluation", I've copy-pasted details about `config.unstable_allowDynamic` into the error page. Because users do not always click links :blob_shrug:
2022-10-07 14:14:11 +00:00
Meno Abels
27fe5c8c28
Add response stream errorhandling in edge-function-runtime (#41102)
The behaviour of edge-function-runtime in the case of an error was not
identical to the edge-runtime.
If a type other than "Uint8Array" is written to the Response stream a
unhandledreject is raised and logged.
The current implementations(nodejs) accepts also Buffers and Strings
which causes that a Application
Developer things our stream implementation is broken if it is executed
as worker.
We introduced a helper function to consume the response stream and write
the "Uint8Array" stream chunks
to the server implementation. Due to the complication that the error
side effect is emitted via the unhandledrejection
handler it is almost impossible to test --- jest does not allow testing
of the unhandlerejections.
We tested extendsiveliy the helper in the edge-runtime so that this PR
integrates just the consuming function.

## 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>
2022-10-06 11:56:13 -07:00
Keen Yee Liau
c7ab8314d7
add attribution to web vitals (#39368)
This commit implements the main proposal presented in
https://github.com/vercel/next.js/issues/39241
to add attribution to web vitals.

Attribution adds more specific debugging info to web vitals,
for example in the case of Cumulative Layout Shift (CLS),
we might want to know
> What's the first element that shifted when the single largest layout shift occurred?

on in the case of Largest Contentful Paint (LCP),
> What's the element corresponding to the LCP for the page?
> If it is an image, what's the URL of the image resource?

Attribution is *disabled* by default because it could potentially
generate a lot data and overwhelm the RUM backend.
It is enabled *per metric* (LCP, FCP, CLS, etc)

As part of this change, `web-vitals` has been upgraded to v3.0.0
This version contains minor bug fixes, please see changelog at
9fe3cc02c8

Fixes #39241 



## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [x] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [x] 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`
- [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)


Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
2022-10-04 00:17:30 +00:00
Mark Ladyshau
40639b28be
Lint files with mjs, mts, cjs and cts extension by default (#40879)
## Feature

Fixes #36819. Closes https://github.com/vercel/next.js/pull/37389.

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [x] Related issues linked using `fixes #number`
- [x] 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`
2022-10-03 19:54:27 +00:00
JJ Kasper
8c1c2f8389
Add conflicting app and page error (#41099)
This adds a proper error when we detect conflicting app and page paths. 

Fixes: https://vercel.slack.com/archives/C043ANYDB24/p1664678172389449

## Bug

- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have a helpful link attached, see `contributing.md`

Co-authored-by: Sukka <isukkaw@gmail.com>
2022-10-02 11:57:21 -07:00
Janicklas Ralph
e0b7167075
Adding experimental size adjust based option (#41009)
Adding experimental `adjustFontFallbacksWithSizeAdjust` option
2022-09-30 00:35:50 +00:00
Jimmy Lai
f7ce8eceb7
misc: remove NEXT_RUNTIME=edge from middleware tests (#40977)
This seems to be the cause for the failure of  https://github.com/vercel/next.js/actions/runs/3133433920/jobs/5087331787 that caused[ the revert](https://github.com/vercel/next.js/pull/40967) of my [commit ](11deaaa82b) that changed the edge bundle to SSR.

After investigating, I realised this was the culprit: this forces the test app code to run with this on, somehow, when built on Vercel.

Removing it should fix it. Let's merge if all tests still pass?

Open questions:
- I'm not sure why this is/was needed, since this variable should always be inlined by webpack
- furthermore, this was causing client code to run as-if on the edge?
- but also, this still shouldn't happen because webpack should get rid of it




## 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)
2022-09-28 09:47:37 +00:00
Ethan Arrowood
e0cc9cd44f
feat(experimental): option to polyfill fetch using undici in Node.js <18 (#40318)
This PR adds a new `experimental.enableUndici` option to let the
developer switch from `next-fetch` to `undici` as the underlying
polyfill for `fetch` in Node.js.

In the current implementation, Next.js makes sure that `fetch` is always
available by using `node-fetch`. However, we do not polyfill in Node.js
18+, since those versions come with their own `fetch` implementation
already, built-in.

Node.js 18+ uses `undici` under the hood, so letting the developer use
`undici` earlier could make the migration easier later on.

Eventually, we hope to be able to stop polyfilling `fetch` in an
upcoming major version of Next.js, shipping less code.


## 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)

Co-authored-by: Balázs Orbán <info@balazsorban.com>
Co-authored-by: Sukka <isukkaw@gmail.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Co-authored-by: Steven <steven@ceriously.com>
2022-09-27 13:37:28 -07:00
Bruno Crosier
83f89c4f87
Improve types for <Image /> and responseLimit (#40863)
Currently, a developer building a website using Next.js could write this
code with no type errors:

```tsx
<Image
  width="kangaroo"
  height="100px"
  quality="medium"
  {...rest}
/>
```

This PR adds stricter type checking, which will catch this type of error
earlier.

Similarly, this PR adds stricter types for the `responseLimit`, to
ensure the types align to:
https://nextjs.org/docs/messages/api-routes-response-size-limit

Co-authored-by: Steven <steven@ceriously.com>
Co-authored-by: JJ Kasper <jj@jjsweb.site>
2022-09-26 22:41:25 -07:00
Jaril
904619509e
Use an ellipsis character instead (#40913)
<!--
Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change that you're making:
-->

For context, making a test change to allow testing CI changes in
https://github.com/vercel/next.js/pull/40910 without approval each run.

@ijjk How's this? The string's not being snapshotted so it shouldn't
break any tests.
2022-09-26 10:24:24 -07:00