Skip to content

Commit 92aa1c3

Browse files
ijjkijjk
committed
Merge branch 'canary' into fix/clarify-conflict-error
2 parents 133f36a + 8fa78a5 commit 92aa1c3

File tree

22 files changed

+567
-157
lines changed

22 files changed

+567
-157
lines changed

‎docs/advanced-features/codemods.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export default function Page() {
4545

4646
### `next-image-to-legacy-image`
4747

48-
Safely migrates existing Next.js 10, 11, 12 applications importing `next/image` to the renamed `next/legacy/image` import in Next.js 13.
48+
This codemod safely migrates existing Next.js 10, 11, 12 applications importing `next/image` to the renamed `next/legacy/image` import in Next.js 13.
4949

5050
For example:
5151

@@ -81,7 +81,7 @@ export default function Home() {
8181

8282
### `next-image-experimental` (experimental)
8383

84-
Dangerously migrates from `next/legacy/image` to the new `next/image` by adding inline styles and removing unused props.
84+
This codemod dangerously migrates from `next/legacy/image` to the new `next/image` by adding inline styles and removing unused props. Please note this codemod is experimental and only covers static usage (such as `<Image src={img} layout="responsive" />`) but not dynamic usage (such as `<Image {...props} />`).
8585

8686
- Removes `layout` prop and adds `style`
8787
- Removes `objectFit` prop and adds `style`

‎docs/api-reference/next/font.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ A string value to define the CSS variable name to be used if the style is applie
9191

9292
### Font function arguments
9393

94-
For usage, review [Local Fonts](/docs/optimizing/fonts#local-fonts).
94+
For usage, review [Local Fonts](/docs/basic-features/font-optimization.md#local-fonts).
9595

9696
| Key | Example | Data type | Required |
9797
| ------------------------------------------- | ----------------------------------------------------------- | -------------------------------------- | -------- |

‎docs/basic-features/font-optimization.md

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,9 @@ Import the font you would like to use from `@next/font/google` as a function. We
2828

2929
To use the font in all your pages, add it to [`_app.js` file](https://nextjs.org/docs/advanced-features/custom-app) under `/pages` as shown below:
3030

31-
```js:pages/_app.js
32-
import { Inter } from '@next/font/google';
31+
```js
32+
// pages/_app.js
33+
import { Inter } from '@next/font/google'
3334

3435
// If loading a variable font, you don't need to specify the font weight
3536
const inter = Inter()
@@ -45,8 +46,9 @@ export default function MyApp({ Component, pageProps }) {
4546

4647
If you can't use a variable font, you will **need to specify a weight**:
4748

48-
```js:pages/_app.js
49-
import { Roboto } from '@next/font/google';
49+
```js
50+
// pages/_app.js
51+
import { Roboto } from '@next/font/google'
5052

5153
const roboto = Roboto({
5254
weight: '400',
@@ -65,10 +67,11 @@ export default function MyApp({ Component, pageProps }) {
6567

6668
You can also use the font without a wrapper and `className` by injecting it inside the `<head>` as follows:
6769

68-
```js:pages/_app.js
69-
import { Inter } from '@next/font/google';
70+
```js
71+
// pages/_app.js
72+
import { Inter } from '@next/font/google'
7073

71-
const inter = Inter();
74+
const inter = Inter()
7275

7376
export default function MyApp({ Component, pageProps }) {
7477
return (
@@ -110,8 +113,9 @@ This can be done in 2 ways:
110113

111114
- On a font per font basis by adding it to the function call
112115

113-
```js:pages/_app.js
114-
const inter = Inter({ subsets: ["latin"] });
116+
```js
117+
// pages/_app.js
118+
const inter = Inter({ subsets: ['latin'] })
115119
```
116120

117121
- Globally for all your fonts in your `next.config.js`
@@ -135,11 +139,12 @@ View the [Font API Reference](/docs/api-reference/next/font.md#nextfontgoogle) f
135139

136140
Import `@next/font/local` and specify the `src` of your local font file. We recommend using [**variable fonts**](https://fonts.google.com/variablefonts) for the best performance and flexibility.
137141

138-
```js:pages/_app.js
139-
import localFont from '@next/font/local';
142+
```js
143+
// pages/_app.js
144+
import localFont from '@next/font/local'
140145

141146
// Font files can be colocated inside of `pages`
142-
const myFont = localFont({ src: './my-font.woff2' });
147+
const myFont = localFont({ src: './my-font.woff2' })
143148

144149
export default function MyApp({ Component, pageProps }) {
145150
return (

‎docs/routing/introduction.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ The example above uses multiple links. Each one maps a path (`href`) to a known
6868
- `/about` → `pages/about.js`
6969
- `/blog/hello-world` → `pages/blog/[slug].js`
7070

71-
Any `<Link />` in the viewport (initially or through scroll) will be prefetched by default (including the corresponding data) for pages using [Static Generation](/docs/basic-features/data-fetching/get-static-props.md). The corresponding data for [server-rendered](/docs/basic-features/data-fetching/get-server-side-props.md) routes is fetched _only when_ the <Link /> is clicked.
71+
Any `<Link />` in the viewport (initially or through scroll) will be prefetched by default (including the corresponding data) for pages using [Static Generation](/docs/basic-features/data-fetching/get-static-props.md). The corresponding data for [server-rendered](/docs/basic-features/data-fetching/get-server-side-props.md) routes is fetched _only when_ the `<Link />` is clicked.
7272

7373
### Linking to dynamic paths
7474

‎docs/testing.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -293,7 +293,7 @@ module.exports = createJestConfig(customJestConfig)
293293
Under the hood, `next/jest` is automatically configuring Jest for you, including:
294294

295295
- Setting up `transform` using [SWC](https://nextjs.org/docs/advanced-features/compiler)
296-
- Auto mocking stylesheets (`.css`, `.module.css`, and their scss variants) and image imports
296+
- Auto mocking stylesheets (`.css`, `.module.css`, and their scss variants), image imports and [`@next/font`](https://nextjs.org/docs/basic-features/font-optimization)
297297
- Loading `.env` (and all variants) into `process.env`
298298
- Ignoring `node_modules` from test resolving and transforms
299299
- Ignoring `.next` from test resolving

‎docs/upgrading.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,16 +34,16 @@ You can continue using `pages` with new features that work in both directories,
3434

3535
### `<Image/>` Component
3636

37-
Next.js 12 introduced new improvements to the Image Component with a temporary import: `next/future/image`. These improvements included less client-side JavaScript, easier ways to extend and style images, better accessibility, and native browser lazy loading.
37+
Next.js 12 introduced many improvements to the Image Component with a temporary import: `next/future/image`. These improvements included less client-side JavaScript, easier ways to extend and style images, better accessibility, and native browser lazy loading.
3838

39-
In version 13, this new behavior is now the default for `next/image`.
39+
Starting in Next.js 13, this new behavior is now the default for `next/image`.
4040

4141
There are two codemods to help you migrate to the new Image Component:
4242

43-
- [**`next-image-to-legacy-image` codemod**](/docs/advanced-features/codemods.md#rename-instances-of-nextimage): Safely and automatically renames `next/image` imports to `next/legacy/image`. Existing components will maintain the same behavior.
44-
- [**`next-image-experimental` codemod**](/docs/advanced-features/codemods.md#migrate-next-image-experimental-experimental): Dangerously adds inline styles and removes unused props using the experimental. This will change the behavior of existing components to match the new defaults. To use this codemod, you need to run the `next-image-to-legacy-image` codemod first.
43+
- [next-image-to-legacy-image](/docs/advanced-features/codemods.md#rename-instances-of-nextimage): This codemod will safely and automatically rename `next/image` imports to `next/legacy/image` to maintain the same behavior as Next.js 12. We recommend running this codemod to quickly update to Next.js 13 automatically.
44+
- [next-image-experimental](/docs/advanced-features/codemods.md#next-image-experimental-experimental): After running the previous codemod, you can optionally run this experimental codemod to upgrade `next/legacy/image` to the new `next/image`, which will remove unused props and add inline styles. Please note this codemod is experimental and only covers static usage (such as `<Image src={img} layout="responsive" />`) but not dynamic usage (such as `<Image {...props} />`).
4545

46-
Alternatively, you can manually update props by following the [`next/future/image` migration guide](/docs/api-reference/next/image.md#migration). This will change the behavior of existing components to match the new defaults.
46+
Alternatively, you can manually update by following the [migration guide](/docs/advanced-features/codemods.md#next-image-experimental-experimental) and also see the [legacy comparison](/docs/api-reference/next/legacy/image.md#comparison).
4747

4848
### `<Link>` Component
4949

‎errors/next-image-upgrade-to-13.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ After running this codemod, you can optionally upgrade `next/legacy/image` to th
3131
npx @next/codemod next-image-experimental .
3232
```
3333

34-
Please note this second codemod is experimental and only covers static usage, not dynamic usage (such `<Image {...props} />`).
34+
Please note this second codemod is experimental and only covers static usage (such as `<Image src={img} layout="responsive" />`) but not dynamic usage (such as `<Image {...props} />`).
3535

3636
### Useful Links
3737

‎examples/with-turbopack/app/hooks/[categorySlug]/[subCategorySlug]/page.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { SkeletonCard } from '@/ui/SkeletonCard';
44

55
export default function Page({ params }: PageProps) {
66
const category = use(
7-
fetchSubCategory(params.categorySlug, params.subCategory),
7+
fetchSubCategory(params.categorySlug, params.subCategorySlug),
88
);
99
if (!category) return null;
1010
return (

‎jest.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,9 @@ const customJestConfig = {
1414
globals: {
1515
AbortSignal: global.AbortSignal,
1616
},
17+
moduleNameMapper: {
18+
'@next/font/(.*)': '@next/font/$1',
19+
},
1720
}
1821

1922
// createJestConfig is exported in this way to ensure that next/jest can load the Next.js config which is async

‎packages/font/src/google/loader.ts

Lines changed: 14 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -49,27 +49,21 @@ const downloadGoogleFonts: FontLoader = async ({
4949
)
5050
}
5151

52-
let fontFaceDeclarations = ''
53-
for (const weight of weights) {
54-
for (const style of styles) {
55-
const fontAxes = getFontAxes(
56-
fontFamily,
57-
weight,
58-
style,
59-
selectedVariableAxes
60-
)
61-
const url = getUrl(fontFamily, fontAxes, display)
52+
const fontAxes = getFontAxes(
53+
fontFamily,
54+
weights,
55+
styles,
56+
selectedVariableAxes
57+
)
58+
const url = getUrl(fontFamily, fontAxes, display)
6259

63-
let cachedCssRequest = cssCache.get(url)
64-
const fontFaceDeclaration =
65-
cachedCssRequest ?? (await fetchCSSFromGoogleFonts(url, fontFamily))
66-
if (!cachedCssRequest) {
67-
cssCache.set(url, fontFaceDeclaration)
68-
} else {
69-
cssCache.delete(url)
70-
}
71-
fontFaceDeclarations += `${fontFaceDeclaration}\n`
72-
}
60+
let cachedCssRequest = cssCache.get(url)
61+
const fontFaceDeclarations =
62+
cachedCssRequest ?? (await fetchCSSFromGoogleFonts(url, fontFamily))
63+
if (!cachedCssRequest) {
64+
cssCache.set(url, fontFaceDeclarations)
65+
} else {
66+
cssCache.delete(url)
7367
}
7468

7569
// Find font files to download

0 commit comments

Comments
 (0)