Skip to content

Commit 7474f10

Browse files
Sam-Phillemon9493samcx
Sam-Phillemon9493
and
samcx
authored
chore(examples): updated the example of with-styled-components (#70796)
This PR updates the with-styled-components example to use the App Router. Here are the changes that have been made: - Renamed the `pages` folder to the `app` folder. - Updated the routing for `/` & `/about` files to align with the App Router. - Added the `layout.tsx` file as part of the App Router. - Updated the `package.json` file. The following actions were performed as part of this PR: - Ran `pnpm prettier-check` with no issues found. - Executed the `pnpm check-examples` script. CC: @samcx --------- Co-authored-by: samcx <[email protected]>
1 parent e8011b5 commit 7474f10

File tree

16 files changed

+111
-74
lines changed

16 files changed

+111
-74
lines changed

‎examples/with-styled-components/components/cards.tsx renamed to ‎examples/with-styled-components/app/_components/cards.tsx

File renamed without changes.

‎examples/with-styled-components/components/globalstyles.tsx renamed to ‎examples/with-styled-components/app/_components/globalstyles.tsx

File renamed without changes.

‎examples/with-styled-components/components/sharedstyles.tsx renamed to ‎examples/with-styled-components/app/_components/sharedstyles.tsx

File renamed without changes.

‎examples/with-styled-components/pages/about.tsx renamed to ‎examples/with-styled-components/app/about/page.tsx

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1+
"use client";
2+
13
import Link from "next/link";
2-
import { Container, Main, Title, Description } from "@/components/sharedstyles";
4+
import {
5+
Container,
6+
Main,
7+
Title,
8+
Description,
9+
} from "../_components/sharedstyles";
310

411
export default function About() {
512
return (

‎examples/with-styled-components/public/favicon.ico renamed to ‎examples/with-styled-components/app/favicon.ico

File renamed without changes.

‎examples/with-styled-components/app/layout.tsx

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { ReactNode } from "react";
2+
import StyledComponentsRegistry from "@/lib/styled-components-registry";
3+
import ClientLayout from "@/lib/client-layout";
4+
5+
export default function RootLayout({ children }: { children: ReactNode }) {
6+
return (
7+
<html lang="en">
8+
<body>
9+
<StyledComponentsRegistry>
10+
<ClientLayout>{children}</ClientLayout>
11+
</StyledComponentsRegistry>
12+
</body>
13+
</html>
14+
);
15+
}

‎examples/with-styled-components/pages/index.tsx renamed to ‎examples/with-styled-components/app/page.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1+
"use client";
12
import Head from "next/head";
23
import {
34
Container,
45
Main,
56
Title,
67
Description,
78
CodeTag,
8-
} from "@/components/sharedstyles";
9-
import Cards from "@/components/cards";
9+
} from "./_components/sharedstyles";
10+
import Cards from "./_components/cards";
1011

1112
export default function Home() {
1213
return (
@@ -23,7 +24,7 @@ export default function Home() {
2324

2425
<Description>
2526
Get started by editing
26-
<CodeTag>pages/index.tsx</CodeTag>
27+
<CodeTag>app/page.tsx</CodeTag>
2728
</Description>
2829

2930
<Cards />

‎examples/with-styled-components/lib/client-layout.tsx

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
"use client";
2+
3+
import { ReactNode } from "react";
4+
import { ThemeProvider, type DefaultTheme } from "styled-components";
5+
import GlobalStyle from "@/app/_components/globalstyles";
6+
7+
const theme: DefaultTheme = {
8+
colors: {
9+
primary: "#111",
10+
secondary: "#0070f3",
11+
},
12+
};
13+
14+
export default function ClientLayout({ children }: { children: ReactNode }) {
15+
return (
16+
<ThemeProvider theme={theme}>
17+
<GlobalStyle />
18+
{children}
19+
</ThemeProvider>
20+
);
21+
}

‎examples/with-styled-components/lib/styled-components-registry.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
"use client";
2+
3+
import React, { useState } from "react";
4+
import { useServerInsertedHTML } from "next/navigation";
5+
import { ServerStyleSheet, StyleSheetManager } from "styled-components";
6+
7+
export default function StyledComponentsRegistry({
8+
children,
9+
}: {
10+
children: React.ReactNode;
11+
}) {
12+
const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
13+
14+
useServerInsertedHTML(() => {
15+
const styles = styledComponentsStyleSheet.getStyleElement();
16+
styledComponentsStyleSheet.instance.clearTag();
17+
return <>{styles}</>;
18+
});
19+
20+
if (typeof window !== "undefined") return <>{children}</>;
21+
22+
return (
23+
<StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
24+
{children}
25+
</StyleSheetManager>
26+
);
27+
}

‎examples/with-styled-components/next-env.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,4 @@
22
/// <reference types="next/image-types/global" />
33

44
// NOTE: This file should not be edited
5-
// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
5+
// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

0 commit comments

Comments
 (0)