[examples] Update styled-components with Babel - add types (#36125)

This PR is looking forward to improve documentation exemples about usage of Next.js with Typescript and Styled-components. I added Typescript types to the original exemple [Example app with styled-components using babel ](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components-babel) ## Feature - [x] Related issues linked using - [x] Documentation added ## Documentation / Examples - [x] Make sure the linting passes by running `yarn lint` fixes #36008
vercel · Apr 27, 2022 · 0cb2037 · 0cb2037
1 parent fca1071
commit 0cb2037
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 18 deletions.
diff --git a/examples/with-styled-components-babel/next-env.d.ts b/examples/with-styled-components-babel/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/with-styled-components-babel/package.json b/examples/with-styled-components-babel/package.json
@@ -13,6 +13,9 @@
     "styled-components": "^5.2.3"
   },
   "devDependencies": {
-    "babel-plugin-styled-components": "^1.12.0"
+    "@types/node": "17.0.24",
+    "@types/styled-components": "5.1.25",
+    "babel-plugin-styled-components": "^1.12.0",
+    "typescript": "4.6.3"
   }
 }
diff --git a/...ith-styled-components-babel/pages/_app.js → ...th-styled-components-babel/pages/_app.tsx b/...ith-styled-components-babel/pages/_app.js → ...th-styled-components-babel/pages/_app.tsx
@@ -8,7 +8,13 @@ const GlobalStyle = createGlobalStyle`
   }
 `
 
-const theme = {
+interface ThemeInterface {
+  colors: {
+    primary: string
+  }
+}
+
+const theme: ThemeInterface = {
   colors: {
     primary: '#0070f3',
   },

diff --git a/...tyled-components-babel/pages/_document.js → ...yled-components-babel/pages/_document.tsx b/...tyled-components-babel/pages/_document.js → ...yled-components-babel/pages/_document.tsx
@@ -1,19 +1,10 @@
-import Document, { Head, Html, Main, NextScript } from 'next/document'
+import Document, { DocumentContext, DocumentInitialProps } from 'next/document'
 import { ServerStyleSheet } from 'styled-components'
 
 export default class MyDocument extends Document {
-  render() {
-    return (
-      <Html lang="en">
-        <Head></Head>
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    )
-  }
-  static async getInitialProps(ctx) {
+  static async getInitialProps(
+    ctx: DocumentContext
+  ): Promise<DocumentInitialProps> {
     const sheet = new ServerStyleSheet()
     const originalRenderPage = ctx.renderPage
 
@@ -27,12 +18,12 @@ export default class MyDocument extends Document {
       const initialProps = await Document.getInitialProps(ctx)
       return {
         ...initialProps,
-        styles: (
+        styles: [
           <>
             {initialProps.styles}
             {sheet.getStyleElement()}
-          </>
-        ),
+          </>,
+        ],
       }
     } finally {
       sheet.seal()

diff --git a/...th-styled-components-babel/pages/index.js → ...h-styled-components-babel/pages/index.tsx b/...th-styled-components-babel/pages/index.js → ...h-styled-components-babel/pages/index.tsx
diff --git a/examples/with-styled-components-babel/tsconfig.json b/examples/with-styled-components-babel/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "incremental": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve"
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}