There are some incoming docs / MDX changes where prettier will throw an error when using the older version. Updating prettier before I bring in those changes.
Looks like the most notable change is adding parentheses around `typeof` checks in TypeScript.
**Before**
```
export type Locale = typeof i18n['locales'][number]
```
**After**
```
export type Locale = (typeof i18n)['locales'][number]
```
We need to spread the module into an object instead of access the module exports that could not exist, to avoid triggering the warning. Fix the bad loader change introduced in #50548
```
Attempted import error: './middleware.js' does not contain a default export (imported as '
mod').
- info Using locally built binary of @next/swc
- warn You are using an experimental edge runtime, the API might change.
- wait compiling...
- warn ../../../../packages/next/dist/build/webpack/loaders/next-middleware-loader.js?abso
lutePagePath=%2FUsers%2Fhuozhi%2Fworkspace%2Fnext.js%2Ftest%2Fe2e%2Fapp-dir%2Fapp%2Fmiddle
ware.js&page=%2Fmiddleware&rootDir=%2FUsers%2Fhuozhi%2Fworkspace%2Fnext.js%2Ftest%2Fe2e%2F
app-dir%2Fapp&matchers=!
Attempted import error: './middleware.js' does not contain a default export (imported as '
mod').
- wait compiling...
```
Manifests tend to be really big and our strategy is to inline them in the edge function script itself and we're hitting some constraints this way.
This PR switches this behaviour via inlining the script and creating a JS object at runtime instead, with the hope that the parsing time will be faster as JSON.parse is very well optimised in V8.
The end goal ofc is to have smaller manifests but this should be a good stopgap.
link NEXT-1273
### Fix Typo in Metadata API Description
#### Description:
This PR fixes a minor typo in the description of the Metadata API.
#### Changes:
- Fixed typo in the Metadata API description.
**File:** `docs/02-app/01-building-your-application/05-optimizing/04-metadata.mdx`
**Old Sentence:**
> Next.js has a Metadata API that can used to define your application metadata (e.g. `meta` and `link` tags inside your HTML `head` element) for improved SEO and web shareability.
**New Sentence:**
> Next.js has a Metadata API that can be used to define your application metadata (e.g. `meta` and `link` tags inside your HTML `head` element) for improved SEO and web shareability.
This change helps improve the readability and understanding of the documentation for readers and users.
#### Checks:
- [x] Followed the Docs Contribution Guide
- [x] Linting passes (`pnpm build && pnpm lint`)
Encode the state tree where the content could contain unicode when
request the RSC payload, to avoid the fetch failure due to bad encoding
for headers
Fixes#48728
fix NEXT-1258
This PR fixes the erroneous `revalidateTag` import on certain examples.
It was imported from `next/server`, but should be imported from
`next/cache` instead.
Co-authored-by: Delba de Oliveira <32464864+delbaoliveira@users.noreply.github.com>
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
