diff --git a/examples/with-styled-components-babel/next-env.d.ts b/examples/with-styled-components-babel/next-env.d.ts
new file mode 100644
index 000000000000..4f11a03dc6cc
--- /dev/null
+++ b/examples/with-styled-components-babel/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+///
+
+// 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
index 83bbeb7b6a61..a9a999263eda 100644
--- 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/examples/with-styled-components-babel/pages/_app.js b/examples/with-styled-components-babel/pages/_app.tsx
similarity index 81%
rename from examples/with-styled-components-babel/pages/_app.js
rename to examples/with-styled-components-babel/pages/_app.tsx
index 019f78b2afc6..75b23189d4b1 100644
--- a/examples/with-styled-components-babel/pages/_app.js
+++ b/examples/with-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/examples/with-styled-components-babel/pages/_document.js b/examples/with-styled-components-babel/pages/_document.tsx
similarity index 65%
rename from examples/with-styled-components-babel/pages/_document.js
rename to examples/with-styled-components-babel/pages/_document.tsx
index 6c343842e4b8..8f22e1b2425b 100644
--- a/examples/with-styled-components-babel/pages/_document.js
+++ b/examples/with-styled-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 (
-
-
-
-
-
-
-
- )
- }
- static async getInitialProps(ctx) {
+ static async getInitialProps(
+ ctx: DocumentContext
+ ): Promise {
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/examples/with-styled-components-babel/pages/index.js b/examples/with-styled-components-babel/pages/index.tsx
similarity index 100%
rename from examples/with-styled-components-babel/pages/index.js
rename to examples/with-styled-components-babel/pages/index.tsx
diff --git a/examples/with-styled-components-babel/tsconfig.json b/examples/with-styled-components-babel/tsconfig.json
new file mode 100644
index 000000000000..1563f3e87857
--- /dev/null
+++ 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"]
+}