Follow-up PR for #37134, this PR adds back the hash in each chunk's filename. This `chunks` in the flight manifest will now be `chunkId:chunkFilename` with this PR, and `globalThis.__next_chunk_load__` then handles the chunk registration (uses chunkId) and chunk loading (uses chunkFilename). (Q: how can we port this to React?)
We can't use `[contenthash]` but only `[chunkhash]` because at the stage of generating the flight manifest, the content isn't finalized and the hash changes after that.
## 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`
## Bug
- [x] Fixes#36807
- [x] Unit tests added
Please review this PR.
As shown in [this Issue](https://github.com/vercel/next.js/issues/36807), the noscript element does not render sizes correctly during SSR.
This change adds `noscriptSizes` to the props passed to `ImageElement` to generate the same `sizes` and `srcset` as the normal img tag that is actually rendered in the browser.
Avoid anonymous function in `next/link` so DevTools show `Link` instead of `Anonymous`:
Before:
After:
## 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`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Missing close parenthesis on docs example from page custom-document-image-import.md
## Bug
- [x] Related issues linked using `fixes #37155`
- [ ] 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`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
This PR makes sure that chunks of client components can be loaded via `__webpack_chunk_load__`, and hydrated correctly inside `viewsDir`.
Side note: we have to get rid of `[contenthash]` from the chunk filename because of a conflict currently which can be resolved later.
## Bug
- [ ] Related issues linked using `fixes #number`
- [x] 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 couldn't understand well this sentence at the first time of reading as a non native english speaker. I think 'that' is needed here.
## 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
- [x] Make sure the linting passes by running `yarn lint`
## Bug
- [x] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`
The PR fixes#37122, an issue introduced by #37105.
`next.config.js` might/will include functions (custom `webpack`, `generateBuildId`, `exportPathsMap`, etc.) that are not able to pass from the main thread to a worker. The PR fixes the issue by only passing primitive args to the worker.
## 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`
`yarn dev` failed (exit 1) on Node.js 17 & Node.js 18:
```
ncc_amp_optimizer failed because error:0308010C:digital envelope routines::unsupported
[...]
ncc_next__react_dev_overlay failed because error:0308010C:digital envelope routines::unsupported
```
The issue was reported to `@vercel/ncc` (https://github.com/vercel/ncc/issues/805) and fixed by https://github.com/vercel/ncc/pull/868, and `@vercel/ncc@0.33.2` includes the fix. However, Next.js still uses `@vercel/ncc@0.33.1` in `devDependencies`.
The PR bump `@vercel/ncc` to the latest version (which is 0.33.4).
Improve the Next.js with TypeScript + GraphQL example:
- [x] use GraphQL Code Generator instead of `graphql-let`: more widespread tool and smaller bundle size (types only generation vs code generation)
- [x] use GraphQL Yoga instead of Apollo Server Micro: for lighter bundle size as [stated here](https://github.com/vercel/next.js/pull/36155)
- [x] introduces GraphQL Code Generator on the API side for Resolvers typing
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
GraphQL Yoga provides a more extensible experience ([Envelop plugins](https://envelop.dev/)) and lighter bundle than the previously showcased `apollo-server-micro` ([64.5kB](https://bundlephobia.com/package/@graphql-yoga/node@2.2.1) vs [196.2kB](https://bundlephobia.com/package/apollo-server-micro@3.6.7) - min & GZiped)
Similar to Next.js, GraphQL Yoga comes with strong defaults and out-of-the-box support for modern GraphQL features (File uploads, subscriptions, and more).
Strong of many years of existence and a large community, GraphQL Yoga 2.0 comes with Next.js support with no additional package or configuration 📦
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
* Fix Type to solve issue found in #36008
It seems the types inside of `DocumentInitialProps` have inconsistencies with the type coming from a fragment
The issue is documented here https://github.com/vercel/next.js/issues/36008
* Add test
Co-authored-by: JJ Kasper <jj@jjsweb.site>
Current implementation causes bugs when navigating between SSG,SSR and
Client Side pages as cache gets overwritten.
Reusing more appropriate implementation used in example
api-routes-apollo-server-and-client-auth introduced with commit
4bbdd09097
fix scroll restoration bug
changed key from index to random string, to be inconsistent with session storage when reloading
Co-authored-by: JJ Kasper <jj@jjsweb.site>
I've improved jest configuration that :
1. Starts collecting test coverage
1. Does not collect coverage for derived files or coverage info itself
1. Uses coverage provider that is based on node itself.
## 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
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Hello! Thanks for making next.js so great.
## Bug
Right now, these types give false confidence. These `key`s are treated as though [a value is defined for _every_ string](https://dev.to/sarioglu/avoiding-unintended-undefined-values-while-using-typescript-record-4igo). However, given an arbitrary request, a particular cookie or query param could be `undefined`.
For example, when building an `/api` endpoint, the code might look like this:
```ts
import type { NextApiRequest, NextApiResponse } from "next"
export default function handler(req: NextApiRequest, res: NextApiResponse) {
// According to the old types, `value` is a string
const value = req.cookies.value
// Type-checking passes but leads to a runtime error when no `value` cookie is provided in the request
// Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
value.toLowerCause()
// ...
}
```
By using `Partial`, TypeScript now knows that these objects don't have values defined for every `key` and accessing a given `key` might resolve to `undefined`.
---
The only obvious error this caused within this repo was on line 333 of the same file. For better or worse, I ended up casting that cookie value to a `string`. There's a series of `if` statements before it that, I guess, are guaranteeing that it's truly a string. Potentially, that stretch could be refactored such that TypeScript _knows_ it's a string.
Also, I tried to follow the contributing guidelines. However, running `yarn types` kicked out a bunch of errors about overwriting files:
```
$ yarn types
yarn run v1.22.10
$ lerna run types --stream
lerna notice cli v4.0.0
lerna info Executing command in 2 packages: "yarn run types"
@next/env: $ tsc index.ts --declaration --emitDeclarationOnly --declarationDir types --esModuleInterop
next: $ tsc --declaration --emitDeclarationOnly --declarationDir dist
next: error TS5055: Cannot write file '/Users/mbrandly/code/next.js/packages/next/dist/build/index.d.ts' because it would overwrite input file.
next: error TS5055: Cannot write file '/Users/mbrandly/code/next.js/packages/next/dist/build/webpack/plugins/build-manifest-plugin.d.ts' because it would overwrite input file.
...
...
...
```
Let me know if there's anything I can improve here! Thanks again.
Adds the `hmr/hotModuleReplacement.js` file to the compiled output
that is used in
`packages/next/build/webpack/plugins/mini-css-extract-plugin.ts`.
Fixes#25560
## Bug
- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Use Apollo onError in order to flag GraphQL errors in the next.js server logs in the with-apollo example
https://www.apollographql.com/docs/react/api/link/apollo-link-error/
## Documentation / Examples
- [x] Make sure the linting passes
~⚠️ I lazily created this PR from Github directly as I don't have a local build of next.js on my current machine.
If ever linting does not pass, I will update this later today (sorry for the noise).
EDIT: it does not, I will update this PR shortly.~
Came across this [Slack thread](https://vercel.slack.com/archives/C02F56A54LU/p1642206518128400). Update the docs about adding `locale` string in `getStaticPaths` docs.
## Feature
- [ ] Related issues linked using #32772
- [x] Documentation added
## Documentation / Examples
- [x] Make sure the linting passes by running `yarn lint`
Closes: #32772
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Windows users cannot use the `rm` and `touch` commands. So I replaced it with `rimraf` and `touch` package.
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
Fixes: #36569
## Bug
- [x] Related issues linked using `fixes #number`
- [x] 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
- [x] Make sure the linting passes by running `yarn lint`
Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
