Added a TS and JS switcher. Previously the code snippet did not have a
switcher. The file extension was .js when the code was TypeScript which
made it confusing to try to read.
---------
Co-authored-by: Lee Robinson <me@leerob.io>
After enabling Draft Mode, `router.refresh()` was incorrectly causing the page to crash and do a full page refresh.
This PR fixes this case.
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
Instead of using azAvgWidth for next/font/google, use xWidthAvg as the webpack implementation does. For now, next/font/local in both the webpack and Turbopack implementations continue to use azAvgWidth. We should align these in the future.
Test Plan: We now pass 26 next/font tests in Turbopack, up from 22.
Also changes JavaScript examples to use `.jsx` extensions so IDEs better recognize the JSX allowed as the first argument to `ImageResponse`.
Fixes#50141
To resolve issue #49382, we found layer doesn't get applied for dynamic imports, so we fixed it on webpack side in https://github.com/webpack/webpack/pull/17310
This PR is to upgrade webpack to 5.86.0 with that patch as a precedence. After this we need to fix the `next/image` client components is missing in client reference manifest when using dynamic imports to fix the issue.
The error `next-router-not-mounted` can also happen when one tries to use the `next/router` hook inside the app directory. The error page has been updated to reflect that, and migration guides are linked.
Closes#47038.
### What?
The `useFormStatus` needs to be used in a client component. That
component should be used within a `form` for the `pending` property to
reflect the form status.
### Why?
The docs are currently not accurate.
### Notes
I could also update the name of the file to not be `form.js`, which
implies this is the entire form instead of just the submit button being
used as a component within the form.
This is an optimization to make the plugin faster, we're currently doing
redundant work `getAppPathRequiredChunks()` for all modules during
`recordModule()` while it's not changing.
For RSC server layer so far we bundle all dependencies, ESM format is the better one rather than CJS to analyze and tree-shake out the unused parts. This PR changes pick the condition names that are in ESM format first for server layer.
Also fixes the misorder of condition names of edge runtime, `conditionNames` should only contain either ESM or CJS, previously the main fields are mixed with conditon names which is not expected for webpack, we separate them now.
Since we're picking ESM instead CJS now, the error of require `exports * from` doesn't exist anymore, but if you're using a CJS dependency which require a ESM package, it will error. This is the existing behavior for our webpack configuration but could happen on server layer bundling
Other related changes:
* Imports are hoisted in ESM, so migrate`enhanceGlobals` to a imported module
* Use `...` to pick the proper imports by import expression, and prefer the `react-server` / `edge-light` condition names for corresponding cases
* Remove edge SSR duplicated `middleware` export checking
## Why?
- When i click `red box` in following image, page returns 404 page.
<img width="1728" alt="스크린샷 2023-06-08 오후 7 31 37" src="https://github.com/vercel/next.js/assets/63336958/903b11e3-17af-426e-8787-b6e033c14a24">
## How?
- I found that `/` is missed at `docs/02-app/01-building-your-application/01-routing/02-pages-and-layouts.mdx`.
- So I added `/`.
Currently this is uploading every time the job is run even if it's a
cache hit and this step can take over 3 minutes un-necessarily so this
skips it if a cache hit occurred.
This makes sure that if `revalidateTag` is called in a Server Action, the client router cache and prefetch cache are invalidated correctly so following navigations won't reuse the cache that might hold stale data.
Similar case for `revalidatePath`. I left a TODO where we can't just invalidate the subtree under the revalidate paths because of current implementation limitations. To ensure correctness, we just do the same as `revalidateTag`.
The `ssrModuleMapping`/`edgeSSRModuleMapping` fields store information
for the Flight client that does SSR to resolve the correct modules in
the SSR bundle. This works as a module ID mapping between the client
bundle and the SSR bundle. During the mapping, we can drop the `chunks`
field because we don't actually have external chunks to load during SSR
as everything is locally `require`'d.
This reduces the client manifest size by at least 20%.
### What?
Another attempt to https://github.com/vercel/next.js/pull/50619 and WEB-1150, trying to apply setup guard more throughly.
I still do not know why original PR passed CI but fails to subsequent PRs after merge, but hope this could be a right guard to prevent unexpected failures.
Move as much of codeowners as possible to use Vercel Spaces.
1. Makes `@timneutkens @ijjk @shuding @huozhi @feedthejim` global owners
2. Make the `@vercel/next-js` team _optional_ owners of **/docs**,
**/errors**, and **/contributing**, makes team owners of a few packages
as per old config.
3. Make `@vercel/devex` (docs and devrel) owners of **/docs**,
**/errors**, and **/contributing**
4. Make `@vercel/devrel` (devrel only) owners of **/examples**
5. Make `@vercel/web-tooling` owners of specific files and folders (as
per old config)
Leaves @styfle as owner of **image** files on the old config since this
pattern `/**/*image*/** ` can't be used with Vercel Spaces.
Note: We cannot add * or / at the end of files.
[Docs](https://spaces-docs.vercel.sh/docs/code-owners#:~:text=Code%20Owners%20files%20are%20meant%20to%20encourage%20distributed%20ownership%20definitions%20across%20a%20codebase.)
Update our git workflow in preparation for open-sourcing the content of
the docs ([linear
task](https://linear.app/vercel/issue/DX-1579/set-up-github-workflow)).
**Templates:**
- [x] Update docs issue template to encourage contributions
- [x] Update PR template to include link to new contribution guide
**Code Owners / Reviewers:**
- https://github.com/vercel/next.js/pull/50841
**Labels:**
- [x] Add DevEx team to labeler.json so PRs get the "created by: DevEx
team"
**Other:**
- [x] Remove docs manifest from CI checks as we no longer have one (keep
the manifest for errors as they live under `/pages`)
- [x] Add `unifiedjs.vscode-mdx` to the vscode extension list
This PR fixes the case of having a shorthand prop `{ id }` referenced from a non-top level closure in the Server Actions compiler. The main problem is that an `Ident` in `PropOrSpread` is not considered as an `Expr`.
See corresponding issue report and test case for more details.
fix#50445
fix NEXT-1254
### Description
Set some environment variables that reduce size on disk and make the
build a little faster.
Also, read the toolchain from the `rust-toolchain` file, so it's not
duplicated in every workflow.
Ported over from the `turbo` repo.
When twitter metadata is not provided but opengraph metadata is, fill the opengraph basic information for twitter metadata.
Twitter card can't be displayed if there's no information from twitter meta tags, at least the `twitter:card`. We fill the `title` `description` and `images` these 3 overlapped properties from opengraph image so they can be displayed properly
Closes NEXT-1111
With vercel/turbo#5156, we'll be able to install our the locally built `next` package. Before, we'd test the tip-of-branch `next-dev` binary against the last cut `next` canary, which causes headaches when we make breaking changes.
With this PR, we'll now test tip-of-branch `next-dev` binary against a tip-of-branch `next` package, and breaking changes can be properly benched.
Fixes WEB-1133
Updates to re-use our build workflow so turbo remote cache is leveraged
and updates re-usable workflow reference to be the same branch instead
of main.