Added with-typescript-styled-components example (#6511)

* Added with-typescript-styled-components example

* Fix linting errors

examples/with-typescript-styled-components/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel", "@zeit/next-typescript/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

examples/with-typescript-styled-components/README.md

@@ -0,0 +1,43 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-typescript-styled-components)
+
+# TypeScript & Styled Components Next.js example
+
+This is a really simple project that show the usage of Next.js with TypeScript and Styled Components.
+
+## How to use it?
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-typescript-styled-components with-typescript-app
+# or
+yarn create next-app --example with-typescript-styled-components with-typescript-app
+```
+
+### Download manually
+
+Download the example:
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-typescript-styled-components
+cd with-typescript-styled-components
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+## The idea behind the example
+
+This is an amalgamation of the 2 existing examples:
+
+* [with-typescript](https://github.com/zeit/next.js/tree/canary/examples/with-typescript)
+* [with-styled-components](https://github.com/zeit/next.js/tree/canary/examples/with-styled-components)

examples/with-typescript-styled-components/next.config.js

@@ -0,0 +1,2 @@
+const withTypescript = require('@zeit/next-typescript')
+module.exports = withTypescript()

examples/with-typescript-styled-components/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "with-typescript-styled-components",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@types/next": "^8.0.1",
+    "@types/react": "^16.8.6",
+    "@types/styled-components": "^4.1.11",
+    "@zeit/next-typescript": "^1.1.1",
+    "next": "^8.0.3",
+    "react": "^16.8.3",
+    "react-dom": "^16.8.3",
+    "styled-components": "^4.1.3"
+  },
+  "devDependencies": {
+    "babel-plugin-styled-components": "^1.10.0"
+  },
+  "license": "ISC"
+}

examples/with-typescript-styled-components/pages/_document.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import Document, { NextDocumentContext } from "next/document";
+import { ServerStyleSheet } from "styled-components";
+
+export default class MyDocument extends Document {
+  static async getInitialProps(ctx: NextDocumentContext) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        )
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+}

examples/with-typescript-styled-components/pages/index.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import styled from "styled-components";
+
+const Title = styled.h1`
+  color: red;
+  font-size: 50px;
+`;
+
+export default () => <Title>My page</Title>;

examples/with-typescript-styled-components/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "jsx": "preserve",
+    "lib": ["dom", "es2017"],
+    "moduleResolution": "node",
+    "allowJs": true,
+    "noEmit": true,
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "removeComments": false,
+    "preserveConstEnums": true,
+    "sourceMap": true
+  }
+}