This PR updates the `cms-contentful` example to use:
- App Router
- TypeScript
- Draft Mode (previously Preview Mode)
- ISR / Data Cache (revalidations through `revalidateTag`)
Further, it combines many separate files into more manageable single files, and tries to better bucket provider-specific logic into the `lib/` folder. I'm hoping this can be the foundation for re-writing the rest of the `cms-*` examples to use App Router.
Overall, the code is much easier to reason about IMO. Pretty happy with the change. I sprinkled some `any`'s throughout here, but if someone wants to make it better, go for it!
https://app-router-contentful.vercel.app/
Hello,
I just make this PR because the `/me.png` example is not in "remote images" section but in "local images", that's why I propose to edit this :)
Thank you!
### Improving Documentation
- [x] Run `pnpm prettier-fix` to fix formatting issues before opening the PR.
- [x] Read the Docs Contribution Guide to ensure your contribution follows the docs guidelines: https://nextjs.org/docs/community/contribution-guide
Similar to #54004, this PR changes `private-next-rsc-action-validate`
and `private-next-rsc-action-client-wrapper` to export named values
instead of default values. In #54230 (currently broken), the Server
Action file was bundled via Vite/Rollup as an external dependency so
we're not doing the ESM interoperation correctly.
Closes#54230.
Fixes#54055.
A bug recently introduced in https://github.com/vercel/next.js/pull/53705 made it so that we were now preinitializing some of our scripts slightly better, but in doing so, we failed to pass in a nonce. This broke nonce-based CSP usage. The fix was to add the `nonce` to our `ReactDOM.preinit` calls.
Manual testing shows that this change fixes the error and the nonce is now passed in as expected.
Co-authored-by: Dan Ott <360261+danieltott@users.noreply.github.com>
This PR changes the heuristic in the client cache to only check and show the prefetched data when it was prefetched or last read 30s ago vs keeping it around as long as it was accessed within 30s.
Noticed these arrays don't actually do anything specific, removed them.
Update: After the multi-zone test failed it seems this was added to ensure you can run multiple Next.js instances in the same process, this simplifies it a bit and adds a comment explaining why it's called.
### What & Why
Add base path handling for the url in redirect error if the `basePath` is configured.
This is only break for server rendering case as the `basePath` is missing in the `Location` header. When running `next build`, everything is managed well with app router and base path on client side so it didn't break.
### How
Adding `basePath` if it's presented for `Location` header.
Update the `RenderOpts` type as basePath is already passed down in it, also update them for turbopack entries
Fixes#54163
Closes NEXT-1529
### What & Why
emotion-js has its own [jsx transform](https://emotion.sh/docs/typescript#emotionreact) which is being applied when `compiler.emotion` is enabled in `next.config.js`.
Thanks to emotion-js team that provided an emotion-js example setup with app router [here](https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319792703), so that we can use it as test example with app router. Based on the setup, we create a test case working with emotion js but failed with error mentioned in #41994 that some client hooks appearing in server components. That is because the emotion-js jsx factory includes some client hooks.
### How
For server components, css-in-js is not recommended to apply so we disabled the transform before, the emotion jsx factory is a separate config that should also not be applied in server components. So in this case we still use react jsx factory instead of the emotion-js one for server components then it won't error. The test case can also be used as an example for basic emotion-js use case with app router.
Fixes#41994
Closes NEXT-1368
In the past few rounds of improving metadata image routes bundling, we have improved the bundling strategy and also updated [the usage tutorial of using custom fonts in og image routes](https://vercel.com/docs/functions/edge-functions/og-image-generation/og-image-examples) which should load the font in the image route handler.
Adding some tests to ensure custom fonts are working with metadata
Closes#48081
Fixes https://github.com/vercel/next.js/issues/54240
The Link component in App Router is not respecting `scroll-behavior: smooth` when only the hash changes.
It appears to be caused by `focusAndScrollRef.onlyHashChange = false` being set before `handleSmoothScroll` is called, causing `htmlElement.style.scrollBehavior` to be overridden to `auto` before `scrollIntoView` is called.
Moving `focusAndScrollRef.onlyHashChange = false` to after `handleSmoothScroll` invocation resolves the issue.
This fixes the compilation of `export { action as renamed }` syntax. Previously it's compiled as `export var action = ...` and with this fix, it will be `export var renamed = ...`.
Closes#54229.
Image Optimization API currently does not work if a custom loaderFile is specified in next.config.js, even if loader is explicitly set to 'default', because it is currently being overridden to 'custom' simply because a loaderFile is specified. This is unnecessary and causing the Image Optimization API routes not to be initialized since the change to the config happens before the routes are initialized.
[Sandbox Reproduction](https://codesandbox.io/p/sandbox/purple-pine-t7hhgl?file=%2Fimage-loader.js%3A8%2C1)
- Fixes#53415
For group routes, unlike normal routes, the root layout is located in the "group"'s segment instead of root layer.
To make it also able to leverage the default not found error component as root not found component, we need to determine if we're in the root group segment in the loader tree, and add the not-found boundary for it.
If you compre the loader tree visually they will look like this:
Normal route tree structure
```
['',
{ children: [segment, {...}, {...}]},
{ layout: ..., 'not-found': ... }
]
```
Group routes
```
[''
{ children: ['(group)', {...}, { layout, 'not-found': ... }]}
{}
]
```
Comparing to normal case, we go 1 layer down in the tree for group routes, then insert the not-found boundary there
Fixes#52255
Closes NEXT-1532
This PR removes our client module reference proxy implementation to directly use the one from the upstream Flight server, as it's added here: https://github.com/facebook/react/pull/27033.
Also updated the server reference creation code a bit to use `defineProperties` - we can't switch to the upstream `registerServerReference` API yet as our Server Actions compiler needs to change a bit to adapt that API since we might have existing `bound` and/or `originalAction` provided.
Closes#53732. Closes#52929.
When using the statically typed routes feature, we might have code like:
```ts
export function Card<T extends string>({ href }: { href: Route<T> | URL })...
export function Card<T extends string>({ href }: LinkProps<T>)...
```
To statically check `<Card href={...}>` and make sure it's `href` is an existing route. However, in certain cases these route types are not generated (e.g. running `tsc` directly w/o a `next dev` or `next build`), which results in TS errors.
This PR adds stub generics to `Route` and `LinkProps` so even if that plugin isn't executed, these types will not block type checking.
### What?
When running Next in standalone mode, `process.env` is not made
available to the render workers, making it impossible to access
environment variables that aren't provided in `.env` files.
### Why?
`initialEnv` is undefined in `createWorkers` when the server is started
in standalone mode.
### How?
This initializes the workers with `process.env` in case `initialEnv` is
unavailable, similar to the behavior of `loadEnvConfig()`
Closes NEXT-1508
Fixes#53367
Follow up to https://github.com/vercel/next.js/pull/54081 -- this was
restoring the router tree improperly causing an error on bfcache hits
Had to override some default behaviors to prevent `forward` / `back` in
playwright from hanging indefinitely since no load event is firing in
these cases
Fixes#54184
Closes NEXT-1528
Fixes#52365
In #52275 that eslint config changed to a fixed canary version to leverage the improvement of `react-hooks` eslint plugin but breaks the installation when 3rd party packages having strict matching for certain version of eslint plugin.
This PR allows both previous version and the canary version be present.
Fixes#54174
We should only add default not-found boundary to loader tree components for root layout. It was accidently added for children routes before
### What?
Strip the relative path prefix (`_next/`) when generating the `PageLoaderAsset`. This is necessary because the page loader will internally use `__turbopack_load__`, which prepends the prefix back onto the path.
### Why?
Without this, we'd try loading `_next/_next/path/to/file.js`, because we'd prepend the prefix onto a path that already contains it.
### How?
When generating the page loader asset, we "proxy" the `OutputAsset` onto a path which has the prefix removed.
~~Depends on https://github.com/vercel/turbo/pull/5717~~
Closes WEB-1377
For edge-runtime we always bundle, and all the mapping of internal ESM files are configured in webpack. Adding a new alias of "next/dist/build" so we don't have to manually check the mapping path for module proxy
Reverts vercel/next.js#53578
This PR (#53578) will break client components test, revert it for now.
Can repro by adding `"use client"` to `app/page.tsx` in `test/production/jest/server-only.test.ts`
```
FAIL app/page.test.jsx
● Test suite failed to run·
Cannot find module 'private-next-rsc-mod-ref-proxy' from 'app/page.jsx'·
Require stack:
```
This:
- Adds a simple, generic tracer in the client that can be subscribed to in order to report spans
- Reports client spans through the HMR socket in the dev server
- Receives these spans and includes them in `.next/trace`
Closes WEB-1387
### What?
~The `setTimeout(() => {}, 0)` was used in place of `setImmediate` due to lack of support in the Edge Runtime. This is no longer a problem.~ Not working like I expected.
`ReadableStream.tee` should be widely supported as well as of [Node 16.5](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/tee#browser_compatibility)
### Why?
Use the platform!
### How?
Use the built-in `ReadableStream.tee()`
