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]>
vercel · Oct 4, 2024 · 7474f10 · 7474f10
1 parent e8011b5
commit 7474f10
Show file tree

Hide file tree

Showing 16 changed files with 111 additions and 74 deletions.
diff --git a/...th-styled-components/components/cards.tsx → ...yled-components/app/_components/cards.tsx b/...th-styled-components/components/cards.tsx → ...yled-components/app/_components/cards.tsx
diff --git a/...ed-components/components/globalstyles.tsx → ...mponents/app/_components/globalstyles.tsx b/...ed-components/components/globalstyles.tsx → ...mponents/app/_components/globalstyles.tsx
diff --git a/...ed-components/components/sharedstyles.tsx → ...mponents/app/_components/sharedstyles.tsx b/...ed-components/components/sharedstyles.tsx → ...mponents/app/_components/sharedstyles.tsx
diff --git a/...es/with-styled-components/pages/about.tsx → ...with-styled-components/app/about/page.tsx b/...es/with-styled-components/pages/about.tsx → ...with-styled-components/app/about/page.tsx
@@ -1,5 +1,12 @@
+"use client";
+
 import Link from "next/link";
-import { Container, Main, Title, Description } from "@/components/sharedstyles";
+import {
+  Container,
+  Main,
+  Title,
+  Description,
+} from "../_components/sharedstyles";
 
 export default function About() {
   return (

diff --git a/...with-styled-components/public/favicon.ico → ...es/with-styled-components/app/favicon.ico b/...with-styled-components/public/favicon.ico → ...es/with-styled-components/app/favicon.ico
diff --git a/examples/with-styled-components/app/layout.tsx b/examples/with-styled-components/app/layout.tsx
@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import StyledComponentsRegistry from "@/lib/styled-components-registry";
+import ClientLayout from "@/lib/client-layout";
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <StyledComponentsRegistry>
+          <ClientLayout>{children}</ClientLayout>
+        </StyledComponentsRegistry>
+      </body>
+    </html>
+  );
+}
diff --git a/...es/with-styled-components/pages/index.tsx → examples/with-styled-components/app/page.tsx b/...es/with-styled-components/pages/index.tsx → examples/with-styled-components/app/page.tsx
@@ -1,12 +1,13 @@
+"use client";
 import Head from "next/head";
 import {
   Container,
   Main,
   Title,
   Description,
   CodeTag,
-} from "@/components/sharedstyles";
-import Cards from "@/components/cards";
+} from "./_components/sharedstyles";
+import Cards from "./_components/cards";
 
 export default function Home() {
   return (
@@ -23,7 +24,7 @@ export default function Home() {
 
         <Description>
           Get started by editing
-          <CodeTag>pages/index.tsx</CodeTag>
+          <CodeTag>app/page.tsx</CodeTag>
         </Description>
 
         <Cards />

diff --git a/examples/with-styled-components/lib/client-layout.tsx b/examples/with-styled-components/lib/client-layout.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { ReactNode } from "react";
+import { ThemeProvider, type DefaultTheme } from "styled-components";
+import GlobalStyle from "@/app/_components/globalstyles";
+
+const theme: DefaultTheme = {
+  colors: {
+    primary: "#111",
+    secondary: "#0070f3",
+  },
+};
+
+export default function ClientLayout({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      {children}
+    </ThemeProvider>
+  );
+}
diff --git a/examples/with-styled-components/lib/styled-components-registry.tsx b/examples/with-styled-components/lib/styled-components-registry.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import React, { useState } from "react";
+import { useServerInsertedHTML } from "next/navigation";
+import { ServerStyleSheet, StyleSheetManager } from "styled-components";
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+
+  if (typeof window !== "undefined") return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}
diff --git a/examples/with-styled-components/next-env.d.ts b/examples/with-styled-components/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
diff --git a/examples/with-styled-components/next.config.js b/examples/with-styled-components/next.config.js
diff --git a/examples/with-styled-components/next.config.mjs b/examples/with-styled-components/next.config.mjs
@@ -0,0 +1,14 @@
+// @ts-check
+
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  /* config options here */
+  reactStrictMode: true,
+  compiler: {
+    styledComponents: true,
+  },
+};
+
+export default nextConfig;
diff --git a/examples/with-styled-components/package.json b/examples/with-styled-components/package.json
@@ -7,14 +7,14 @@
   },
   "dependencies": {
     "next": "latest",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.1.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
-    "@types/node": "^18.18.3",
-    "@types/react": "^18.2.33",
-    "@types/react-dom": "^18.2.14",
-    "typescript": "^5.2.2"
+    "@types/node": "^22.7.4",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.2"
   }
 }
diff --git a/examples/with-styled-components/pages/_app.tsx b/examples/with-styled-components/pages/_app.tsx
diff --git a/examples/with-styled-components/pages/_document.tsx b/examples/with-styled-components/pages/_document.tsx
diff --git a/examples/with-styled-components/tsconfig.json b/examples/with-styled-components/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2017",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -15,8 +15,19 @@
     "incremental": true,
     "paths": {
       "@/*": ["./*"]
-    }
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "styled.d.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "styled.d.ts",
+    ".next/types/**/*.ts"
+  ],
   "exclude": ["node_modules"]
 }