Skip to content

Commit 24d7fcc

Browse files
P41T0P41T0
authored
Merge branch 'canary' into canary
2 parents dccba7d + 2ba4a85 commit 24d7fcc

File tree

75 files changed

+1251
-350
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

75 files changed

+1251
-350
lines changed

‎crates/next-core/src/app_structure.rs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1054,7 +1054,7 @@ async fn directory_tree_to_loader_tree_internal(
10541054
let current_level_is_parallel_route = is_parallel_route(&directory_name);
10551055

10561056
if current_level_is_parallel_route {
1057-
tree.segment = rcstr!("__virtual_segment__");
1057+
tree.segment = rcstr!("(slot)");
10581058
}
10591059

10601060
if let Some(page) = (app_path == for_app_path || app_path.is_catchall())

‎crates/next-custom-transforms/src/transforms/react_server_components.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -624,6 +624,7 @@ impl ReactServerComponentValidator {
624624
"useRouter",
625625
"useServerInsertedHTML",
626626
"ServerInsertedHTMLContext",
627+
"unstable_isUnrecognizedActionError",
627628
],
628629
),
629630
("next/link", vec!["useLinkStatus"]),

‎crates/next-error-code-swc-plugin/src/lib.rs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ fn is_error_class_name(name: &str) -> bool {
5454
|| name == "SerializableError"
5555
|| name == "StaticGenBailoutError"
5656
|| name == "TimeoutError"
57+
|| name == "UnrecognizedActionError"
5758
|| name == "Warning"
5859
}
5960

‎docs/01-app/01-getting-started/11-css.mdx‎

Lines changed: 172 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,190 @@
11
---
22
title: CSS
3-
description: Learn about the different ways to add CSS to your application, including CSS Modules, Global CSS, Tailwind CSS, and more.
3+
description: Learn about the different ways to add CSS to your application, including Tailwind CSS, CSS Modules, Global CSS, and more.
44
related:
55
title: Next Steps
66
description: Learn more about the alternatives ways you can use CSS in your application.
77
links:
8-
- app/guides/tailwind-css
8+
- app/guides/tailwind-v3-css
99
- app/guides/sass
1010
- app/guides/css-in-js
1111
---
1212

1313
Next.js provides several ways to style your application using CSS, including:
1414

15+
- [Tailwind CSS](#tailwind-css)
1516
- [CSS Modules](#css-modules)
1617
- [Global CSS](#global-css)
1718
- [External Stylesheets](#external-stylesheets)
18-
- [Tailwind CSS](/docs/app/guides/tailwind-css)
1919
- [Sass](/docs/app/guides/sass)
2020
- [CSS-in-JS](/docs/app/guides/css-in-js)
2121

22+
## Tailwind CSS
23+
24+
[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework that provides low-level utility classes to build custom designs.
25+
26+
<AppOnly>
27+
28+
Install Tailwind CSS:
29+
30+
```bash package="pnpm"
31+
pnpm add -D tailwindcss @tailwindcss/postcss
32+
```
33+
34+
```bash package="npm"
35+
npm install -D tailwindcss @tailwindcss/postcss
36+
```
37+
38+
```bash package="yarn"
39+
yarn add -D tailwindcss @tailwindcss/postcss
40+
```
41+
42+
```bash package="bun"
43+
bun add -D tailwindcss @tailwindcss/postcss
44+
```
45+
46+
Add the PostCSS plugin to your `postcss.config.mjs` file:
47+
48+
```js filename="postcss.config.mjs"
49+
export default {
50+
plugins: {
51+
'@tailwindcss/postcss': {},
52+
},
53+
}
54+
```
55+
56+
Import Tailwind in your global CSS file:
57+
58+
```css filename="app/globals.css"
59+
@import 'tailwindcss';
60+
```
61+
62+
Import the CSS file in your root layout:
63+
64+
```tsx filename="app/layout.tsx" switcher
65+
import './globals.css'
66+
67+
export default function RootLayout({
68+
children,
69+
}: {
70+
children: React.ReactNode
71+
}) {
72+
return (
73+
<html lang="en">
74+
<body>{children}</body>
75+
</html>
76+
)
77+
}
78+
```
79+
80+
```jsx filename="app/layout.js" switcher
81+
import './globals.css'
82+
83+
export default function RootLayout({ children }) {
84+
return (
85+
<html lang="en">
86+
<body>{children}</body>
87+
</html>
88+
)
89+
}
90+
```
91+
92+
Now you can start using Tailwind's utility classes in your application:
93+
94+
```tsx filename="app/page.tsx" switcher
95+
export default function Page() {
96+
return (
97+
<main className="flex min-h-screen flex-col items-center justify-between p-24">
98+
<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
99+
</main>
100+
)
101+
}
102+
```
103+
104+
```jsx filename="app/page.js" switcher
105+
export default function Page() {
106+
return (
107+
<main className="flex min-h-screen flex-col items-center justify-between p-24">
108+
<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
109+
</main>
110+
)
111+
}
112+
```
113+
114+
</AppOnly>
115+
116+
<PagesOnly>
117+
118+
Install Tailwind CSS:
119+
120+
```bash package="pnpm"
121+
pnpm add -D tailwindcss @tailwindcss/postcss
122+
```
123+
124+
```bash package="npm"
125+
npm install -D tailwindcss @tailwindcss/postcss
126+
```
127+
128+
```bash package="yarn"
129+
yarn add -D tailwindcss @tailwindcss/postcss
130+
```
131+
132+
```bash package="bun"
133+
bun add -D tailwindcss @tailwindcss/postcss
134+
```
135+
136+
Add the PostCSS plugin to your `postcss.config.mjs` file:
137+
138+
```js filename="postcss.config.mjs"
139+
export default {
140+
plugins: {
141+
'@tailwindcss/postcss': {},
142+
},
143+
}
144+
```
145+
146+
Import Tailwind in your global CSS file:
147+
148+
```css filename="styles/globals.css"
149+
@import 'tailwindcss';
150+
```
151+
152+
Import the CSS file in your `pages/_app.js` file:
153+
154+
```jsx filename="pages/_app.js"
155+
import '@/styles/globals.css'
156+
157+
export default function MyApp({ Component, pageProps }) {
158+
return <Component {...pageProps} />
159+
}
160+
```
161+
162+
Now you can start using Tailwind's utility classes in your application:
163+
164+
```tsx filename="pages/index.tsx" switcher
165+
export default function Home() {
166+
return (
167+
<main className="flex min-h-screen flex-col items-center justify-between p-24">
168+
<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
169+
</main>
170+
)
171+
}
172+
```
173+
174+
```jsx filename="pages/index.js" switcher
175+
export default function Home() {
176+
return (
177+
<main className="flex min-h-screen flex-col items-center justify-between p-24">
178+
<h1 className="text-4xl font-bold">Welcome to Next.js!</h1>
179+
</main>
180+
)
181+
}
182+
```
183+
184+
</PagesOnly>
185+
186+
> **Good to know:** If you need broader browser support for very old browsers, see the [Tailwind CSS v3 setup instructions](/docs/app/guides/tailwind-v3-css).
187+
22188
## CSS Modules
23189

24190
CSS Modules locally scope CSS by generating unique class names. This allows you to use the same class in different files without worrying about naming collisions.
@@ -125,7 +291,7 @@ export default function RootLayout({ children }) {
125291
}
126292
```
127293

128-
> **Good to know:** Global styles can be imported into any layout, page, or component inside the `app` directory. However, since Next.js uses React's built-in support for stylesheets to integrate with Suspense, this currently does not remove stylesheets as you navigate between routes which can lead to conflicts. We recommend using global styles for _truly_ global CSS, and [CSS Modules](#css-modules) for scoped CSS.
294+
> **Good to know:** Global styles can be imported into any layout, page, or component inside the `app` directory. However, since Next.js uses React's built-in support for stylesheets to integrate with Suspense, this currently does not remove stylesheets as you navigate between routes which can lead to conflicts. We recommend using global styles for _truly_ global CSS (like Tailwind's base styles), [Tailwind CSS](#tailwind-css) for component styling, and [CSS Modules](#css-modules) for custom scoped CSS when needed.
129295
130296
</AppOnly>
131297

@@ -277,7 +443,8 @@ To keep CSS ordering predictable:
277443

278444
- Try to contain CSS imports to a single JavaScript or TypeScript entry file
279445
- Import global styles and Tailwind stylesheets in the root of your application.
280-
- Use CSS Modules instead of global styles for nested components.
446+
- **Use Tailwind CSS** for most styling needs as it covers common design patterns with utility classes.
447+
- Use CSS Modules for component-specific styles when Tailwind utilities aren't sufficient.
281448
- Use a consistent naming convention for your CSS modules. For example, using `<name>.module.css` over `<name>.tsx`.
282449
- Extract shared styles into shared components to avoid duplicate imports.
283450
- Turn off linters or formatters that auto-sort imports like ESLint’s [`sort-imports`](https://eslint.org/docs/latest/rules/sort-imports).

‎docs/01-app/01-getting-started/14-metadata-and-og-images.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ The Metadata APIs can be used to define your application metadata for improved S
2323

2424
With all the options above, Next.js will automatically generate the relevant `<head>` tags for your page, which can be inspected in the browser's developer tools.
2525

26+
The `metadata` object and `generateMetadata` function exports are only supported in Server Components.
27+
2628
## Default fields
2729

2830
There are two default `meta` tags that are always added even if a route doesn't define metadata:

‎docs/01-app/02-guides/migrating/app-router-migration.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -887,7 +887,7 @@ If you are also migrating to Next.js from a Single-Page Application (SPA) at the
887887
In the `pages` directory, global stylesheets are restricted to only `pages/_app.js`. With the `app` directory, this restriction has been lifted. Global styles can be added to any layout, page, or component.
888888

889889
- [CSS Modules](/docs/app/getting-started/css#css-modules)
890-
- [Tailwind CSS](/docs/app/guides/tailwind-css)
890+
- [Tailwind CSS](/docs/app/getting-started/css#tailwind-css)
891891
- [Global Styles](/docs/app/getting-started/css#global-css)
892892
- [CSS-in-JS](/docs/app/guides/css-in-js)
893893
- [External Stylesheets](/docs/app/getting-started/css#external-stylesheets)
@@ -921,7 +921,7 @@ export default function RootLayout({ children }) {
921921
}
922922
```
923923

924-
Learn more about [styling with Tailwind CSS](/docs/app/guides/tailwind-css)
924+
Learn more about [styling with Tailwind CSS](/docs/app/getting-started/css#tailwind-css)
925925

926926
## Using App Router together with Pages Router
927927

‎docs/01-app/02-guides/migrating/from-create-react-app.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -300,7 +300,7 @@ export default function RootLayout({
300300
}
301301
```
302302

303-
If you’re using Tailwind CSS, see our [installation docs](/docs/app/guides/tailwind-css).
303+
If you're using Tailwind CSS, see our [installation docs](/docs/app/getting-started/css#tailwind-css).
304304

305305
### Step 6: Create the Entrypoint Page
306306

‎docs/01-app/02-guides/progressive-web-apps.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -649,7 +649,7 @@ Let’s go over each of these options:
649649
650650
Learn more about defining [Content Security Policies](/docs/app/guides/content-security-policy) with Next.js.
651651
652-
## Next Steps
652+
## Extending your PWA
653653
654654
1. **Exploring PWA Capabilities**: PWAs can leverage various web APIs to provide advanced functionality. Consider exploring features like background sync, periodic background sync, or the File System Access API to enhance your application. For inspiration and up-to-date information on PWA capabilities, you can refer to resources like [What PWA Can Do Today](https://whatpwacando.today/).
655655
2. **Static Exports:** If your application requires not running a server, and instead using a static export of files, you can update the Next.js configuration to enable this change. Learn more in the [Next.js Static Export documentation](/docs/app/guides/static-exports). However, you will need to move from Server Actions to calling an external API, as well as moving your defined headers to your proxy.

0 commit comments

Comments
 (0)