From 0cb2037a41c27d4ced57b5479e27edf96f748083 Mon Sep 17 00:00:00 2001
From: Rafo <53544360+rafae2k@users.noreply.github.com>
Date: Wed, 27 Apr 2022 09:43:06 -0300
Subject: [PATCH] [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
---
.../next-env.d.ts | 5 ++++
.../with-styled-components-babel/package.json | 5 +++-
.../pages/{_app.js => _app.tsx} | 8 ++++++-
.../pages/{_document.js => _document.tsx} | 23 ++++++-------------
.../pages/{index.js => index.tsx} | 0
.../tsconfig.json | 20 ++++++++++++++++
6 files changed, 43 insertions(+), 18 deletions(-)
create mode 100644 examples/with-styled-components-babel/next-env.d.ts
rename examples/with-styled-components-babel/pages/{_app.js => _app.tsx} (81%)
rename examples/with-styled-components-babel/pages/{_document.js => _document.tsx} (65%)
rename examples/with-styled-components-babel/pages/{index.js => index.tsx} (100%)
create mode 100644 examples/with-styled-components-babel/tsconfig.json
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"]
+}