This PR removes manual HTML `<b>` tags in `<details><summary>...` titles. They are unnecessary because we add bold styling in CSS.
Also did a tiny fix to some other unnecessary inline HTML.
Like how we handled RSC loader transform before, we also apply swc
loader to middleware to make sure the imports optimization is applied so
og package won't be bundled
Fixes#50492
### What?
When `verbatimModuleSyntax: true` is set, `isolatedModules: true` are not allowed by TS
### Why?
Next always adds `isolatedModules: true` which causes TS error.
### How?
- Fixes#46509
fix NEXT-689
Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
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
