[examples] with-ts-eslint-jest example app (#12025)

* set up with-ts-eslint-jest example app

* eslint ignore new app bc it has a conflicting eslintrc

* make eslint + husky setup manual

* clarify app README setup notes

* move page tests out of pages/ dir

* Simplifying configs

* extend "prettier"

* format fix

* Updated rules

* Added husky configs and removed debug option

* Removed notes and configuration

* Updated pages

* Added links to readme

* Added example to .prettierignore

* Updated snap

* Make the lint work

Co-authored-by: Luis Alvarez D <luis@vercel.com>

Author: erikdstock

.eslintignore

@@ -2,7 +2,7 @@ node_modules
 **/.next/**
 **/_next/**
 **/dist/**
-examples/with-ioc/**
+examples/with-typescript-eslint-jest/**
 examples/with-kea/**
 packages/next/compiled/**/*
 packages/react-refresh-utils/**/*.js

examples/with-typescript-eslint-jest/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["next/babel"]
+}

examples/with-typescript-eslint-jest/.eslintignore

@@ -0,0 +1,3 @@
+**/node_modules/*
+**/out/*
+**/.next/*

examples/with-typescript-eslint-jest/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended"
+    // Uncomment the following lines to enable eslint-config-prettier
+    // Is not enabled right now to avoid issues with the Next.js repo
+    // "prettier",
+    // "prettier/@typescript-eslint"
+  ],
+  "env": {
+    "es6": true,
+    "browser": true,
+    "jest": true,
+    "node": true
+  },
+  "rules": {
+    "react/react-in-jsx-scope": 0,
+    "react/display-name": 0,
+    "react/prop-types": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/explicit-member-accessibility": 0,
+    "@typescript-eslint/indent": 0,
+    "@typescript-eslint/member-delimiter-style": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/no-use-before-define": 0,
+    "@typescript-eslint/no-unused-vars": [
+      2,
+      {
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "no-console": [
+      2,
+      {
+        "allow": ["warn", "error"]
+      }
+    ]
+  }
+}

examples/with-typescript-eslint-jest/.gitignore

@@ -0,0 +1,17 @@
+# dependencies
+node_modules
+
+# next.js
+.next
+.env*.local
+
+# testing
+coverage
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# misc
+.DS_Store

examples/with-typescript-eslint-jest/.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+yarn.lock
+package-lock.json
+public

examples/with-typescript-eslint-jest/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": false,
+  "singleQuote": true
+}

examples/with-typescript-eslint-jest/README.md

@@ -0,0 +1,48 @@
+# NextJS Typescript Boilerplate
+
+Bootstrap a developer-friendly NextJS app configured with:
+
+- [Typescript](https://www.typescriptlang.org/)
+- Linting with [ESLint](https://eslint.org/)
+- Formatting with [Prettier](https://prettier.io/)
+- Linting, typechecking and formatting on by default using [`husky`](https://github.com/typicode/husky) for commit hooks
+- Testing with [Jest](https://jestjs.io/) and [`react-testing-library`](https://testing-library.com/docs/react-testing-library/intro)
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/zeit/next.js/tree/canary/examples/with-typescript-eslint-jest)
+
+## How to use
+
+### Using `create-next-app`
+
+Execute [`create-next-app`](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-typescript-eslint-jest with-typescript-eslint-jest-app
+# or
+yarn create next-app --example with-typescript-eslint-jest with-typescript-eslint-jest-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-eslint-jest
+cd with-typescript-eslint-jest
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+# or
+yarn
+yarn dev
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-typescript-eslint-jest/jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  roots: ['<rootDir>'],
+  moduleFileExtensions: ['js', 'ts', 'tsx', 'json'],
+  testPathIgnorePatterns: ['<rootDir>[/\\\\](node_modules|.next)[/\\\\]'],
+  transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(ts|tsx)$'],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'babel-jest',
+  },
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname',
+  ],
+  moduleNameMapper: {
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
+    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.js',
+  },
+}

examples/with-typescript-eslint-jest/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />