Update to TypeScript and [email protected]

.babelrc

@@ -1,7 +1,6 @@
 {
   "presets": [
-    "next/babel",
-    "stage-0"
+    "next/babel"
   ],
   "plugins": [
     [

.circleci/config.yml

@@ -1,4 +1,3 @@
-
 version: 2
 jobs:
   build:
@@ -8,22 +7,15 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          name: Restore node_modules cache
           keys:
             - v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "package-lock.json" }}
             - v1-node-{{ arch }}-{{ .Branch }}-
             - v1-node-{{ arch }}-
-      - run:
-          name: Install Dependencies
-          command: npm install
-      - run:
-          name: Build
-          command: npm run build
-      - run:
-          name: Lint
-          command: npm run lint
+      - run: npm install
+      - run: npm run build
+      - run: npm run typecheck
+      - run: npm run lint
       - save_cache:
-          name: Save node_modules cache
           key: v1-node-{{ arch }}-{{ .Branch }}-{{ checksum "package-lock.json" }}
           paths:
             - node_modules

.eslintignore

@@ -0,0 +1,2 @@
+/.next
+!.eslintrc.js

.eslintrc.js

@@ -0,0 +1,88 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const typescriptEslintRecommended = require('@typescript-eslint/eslint-plugin/dist/configs/recommended.json');
+const typescriptEslintPrettier = require('eslint-config-prettier/@typescript-eslint');
+
+module.exports = {
+  env: {
+    node: true,
+  },
+  parser: 'babel-eslint',
+  extends: [
+    'airbnb',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'prettier/react',
+    'prettier/@typescript-eslint',
+  ],
+  plugins: ['prettier'],
+  rules: {
+    'prettier/prettier': 'error',
+    'react/jsx-filename-extension': 'off',
+    'jsx-a11y/label-has-for': [
+      2,
+      {
+        components: ['Label'],
+        required: {
+          some: ['nesting', 'id'],
+        },
+        allowChildren: true,
+      },
+    ],
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        devDependencies: ['.eslintrc.js', '**/__tests__/**/*', 'setupTest.ts'],
+      },
+    ],
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        devDependencies: ['.eslintrc.js', '**/__tests__/**/*'],
+      },
+    ],
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.ts', '.tsx'],
+      },
+    },
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parser: '@typescript-eslint/parser',
+      // NOTE: Workaround for no nested extends possible.
+      // See https://github.com/eslint/eslint/issues/8813.
+      // Working solution would be following, if we had nested extends:
+      // ```
+      // extends: [
+      //   'airbnb-base',
+      //   'plugin:@typescript-eslint/recommended',
+      //   'prettier/@typescript-eslint',
+      //   'prettier',
+      // ],
+      // ```
+      plugins: ['@typescript-eslint', 'prettier'],
+      rules: Object.assign(
+        typescriptEslintRecommended.rules,
+        typescriptEslintPrettier.rules,
+        {
+          '@typescript-eslint/explicit-function-return-type': 'error',
+        },
+      ),
+    },
+    {
+      files: [
+        'setupTest.js',
+        'setupTest.ts',
+        '*.spec.js',
+        '*.spec.ts',
+        '*.spec.tsx',
+      ],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+};

.prettierignore

@@ -0,0 +1,2 @@
+/.next
+!.eslintrc.js

.prettierrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  trailingComma: 'all',
+  singleQuote: true,
+};

README.md

@@ -1,22 +1,23 @@
 # ampreact
-⚡⚛ [AMP HTML][amp], [Next.js][next], [React][react],
-[styled-components][styled], [GraphQL][graphql] — The most trendy website boilerplate
-possible.
+⚡⚛ [AMP HTML][], [Next.js][], [React][], [styled-components][], [GraphQL][],
+and [TypeScript][] — The most trendy website boilerplate possible.
 
 ## About
 
-The core of `ampreact` is built on [Next.js][next], used for all the routing and
-serving of pages. For styling, [`styled-components`][styled] makes it easy—with
+The core of `ampreact` is built on [Next.js][], used for all the routing and
+serving of pages. For styling, [styled-components][] makes it easy—with
 just a small modification to the rendering of the `<style />` tags generated,
-it works nicely with [AMP HTML][amp]. Finally, [`react-amphtml`][react-amphtml]
-is used for rendering all of the [AMP HTML][amp] built-ins, extensions, and
+it works nicely with [AMP HTML][]. Finally, [`react-amphtml`][]
+is used for rendering all of the [AMP HTML][] built-ins, extensions, and
 the `<script />` tags needed to use them.
 
-The pages generated should all by properly validated by [AMP HTML][amp] 💯
+[`react-amphtml`]: https://github.com/dfrankland/react-amphtml/
+
+The pages generated should all by properly validated by [AMP HTML][] 💯
 
 ## Usage
 
-All the usage and benefits of [Next.js][next] are available to `ampreact`.
+All the usage and benefits of [Next.js][] are available to `ampreact`.
 
 *   Installation:
 
@@ -49,17 +50,18 @@ An example of `ampreact` can be seen here: <https://ampreact-szogszfmrw.now.sh/>
 
 ## Deployment
 
-Because `ampreact` is built on top of [Next.js][next] it is simple to deploy to
-[Now][now] or any other cloud infrastructure providers.
+Because `ampreact` is built on top of [Next.js][] it is simple to deploy to
+[Now][] or any other cloud infrastructure providers.
 
-[![Deploy to now][now deploy badge]][now deploy ampreact]
+[![Deploy to now][]][now deploy ampreact]
 
-[amp]: https://github.com/ampproject/amphtml/
-[next]: https://github.com/zeit/next.js/
-[react]: https://github.com/facebook/react/
-[styled]: https://github.com/styled-components/styled-components/
-[graphql]: https://github.com/graphql/graphql-js
-[react-amphtml]: https://github.com/dfrankland/react-amphtml/
-[now]: https://zeit.co/now/
-[now deploy badge]: https://deploy.now.sh/static/button.svg
+[Now]: https://zeit.co/now/
+[Deploy to now]: https://deploy.now.sh/static/button.svg
 [now deploy ampreact]: https://deploy.now.sh/?repo=https://github.com/dfrankland/ampreact
+
+[AMP HTML]: https://github.com/ampproject/amphtml/
+[Next.js]: https://github.com/zeit/next.js/
+[React]: https://github.com/facebook/react/
+[styled-components]: https://github.com/styled-components/styled-components/
+[GraphQL]: https://github.com/graphql/graphql-js
+[TypeScript]: https://github.com/microsoft/TypeScript

next-env.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable spaced-comment */
+/// <reference types="next" />
+/// <reference types="next/types/global" />