perf: update all deps (next 11) & relative path, etc

.eslintrc.json

@@ -3,24 +3,10 @@
     "browser": true,
     "es2021": true
   },
-  "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended",
-    "plugin:import/typescript",
-    "airbnb"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 12,
-    "sourceType": "module"
-  },
-  "plugins": ["react", "react-hooks", "jsx-a11y", "@typescript-eslint"],
+  "extends": ["next", "prettier"],
   "rules": {
-    "import/no-unresolved": 0,
     "import/extensions": 0,
+    "import/no-unresolved": 0,
     "no-console": 2,
     "no-unused-vars": 2,
     "react/jsx-filename-extension": 0,

.gitignore

@@ -38,4 +38,4 @@ package-lock.json
 
 # PWA
 public/sw.js
-public/workbox*
+public/workbox-*.js

.lintstagedrc.json

@@ -1,5 +1,5 @@
 {
-  "*.{css,scss,json,md,html}": ["prettier --ignore-path .gitignore --write"],
+  "*.{css,scss,json,md,html}": "prettier --ignore-path .gitignore --write",
   "*.{js,ts,tsx}": [
     "prettier --ignore-path .gitignore --write",
     "eslint --ignore-path .gitignore --quiet --fix"

README.md

@@ -7,18 +7,18 @@ You can check [demo](https://next-typescript-pwa-starter.vercel.app/)
 ## Features
 
 - [React.js 17](https://reactjs.org/blog/2020/10/20/react-v17.html) - Blog introduce react v17.0.
-- [Next.js 10](https://nextjs.org/blog/next-10) - Blog introduce next.js 10.
+- [Next.js 11](https://nextjs.org/blog/next-11) - Blog introduce next.js 11.
 - [Typescript 4](https://www.typescriptlang.org/) - Documentation of typescript.
 - [Next PWA 5](https://www.npmjs.com/package/next-pwa) - Documentation of next pwa.
 - [Docker](https://docs.docker.com/) - Documentation of docker.
 - [Eslint 7](https://eslint.org/docs/user-guide/getting-started) - Documentation of eslint.
 - [Prettier 2](https://prettier.io/docs/en/index.html) - Documentation of prettier.
-- [Husky 5](https://typicode.github.io/husky/#/) - Documentation of husky.
-- [Lint Staged 10](https://github.com/okonet/lint-staged) - Documentation of lint staged.
+- [Husky 6](https://typicode.github.io/husky/#/) - Documentation of husky.
+- [Lint Staged 11](https://github.com/okonet/lint-staged) - Documentation of lint staged.
 
 ## Usage
 
-This project using node >= 12 & yarn
+This project using node >= 12.13.0 & yarn
 
 ### Installation
 

changelog.config.json

@@ -0,0 +1,79 @@
+{
+  "disableEmoji": true,
+  "list": [
+    "chore",
+    "ci",
+    "docs",
+    "feat",
+    "fix",
+    "perf",
+    "refactor",
+    "release",
+    "style",
+    "test"
+  ],
+  "maxMessageLength": 64,
+  "minMessageLength": 3,
+  "questions": [
+    "type",
+    "scope",
+    "subject",
+    "body",
+    "breaking",
+    "issues",
+    "lerna"
+  ],
+  "scopes": [],
+  "types": {
+    "chore": {
+      "description": "Build process or auxiliary tool changes",
+      "emoji": "🤖",
+      "value": "chore"
+    },
+    "ci": {
+      "description": "CI related changes",
+      "emoji": "🎡",
+      "value": "ci"
+    },
+    "docs": {
+      "description": "Documentation only changes",
+      "emoji": "✏️",
+      "value": "docs"
+    },
+    "feat": {
+      "description": "A new feature",
+      "emoji": "🎸",
+      "value": "feat"
+    },
+    "fix": {
+      "description": "A bug fix",
+      "emoji": "🐛",
+      "value": "fix"
+    },
+    "perf": {
+      "description": "A code change that improves performance",
+      "emoji": "⚡️",
+      "value": "perf"
+    },
+    "refactor": {
+      "description": "A code change that neither fixes a bug or adds a feature",
+      "emoji": "💡",
+      "value": "refactor"
+    },
+    "release": {
+      "description": "Create a release commit",
+      "emoji": "🏹",
+      "value": "release"
+    },
+    "style": {
+      "description": "Markup, white-space, formatting, missing semi-colons...",
+      "emoji": "💄",
+      "value": "style"
+    },
+    "test": {
+      "description": "Adding missing tests",
+      "emoji": "💍",
+      "value": "test"
+    }
+  }
+}

next-env.d.ts

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

next.config.js

@@ -5,5 +5,4 @@ module.exports = withPWA({
     disable: process.env.NODE_ENV === 'development',
     dest: 'public',
   },
-  future: { webpack5: true },
 });

package.json

@@ -27,7 +27,7 @@
     "build": "next build",
     "start": "next start",
     "telemetry": "next telemetry",
-    "lint": "eslint --ignore-path .gitignore \"**/*.+(js|ts|tsx)\" --quiet --fix",
+    "lint": "next lint",
     "format": "prettier --ignore-path .gitignore \"**/*.+(js|ts|tsx|css|scss|json|md|html)\" --write",
     "type-check": "tsc --noEmit",
     "type-check:watch": "tsc --noEmit --watch",
@@ -37,30 +37,24 @@
     "postpublish": "pinst --enable"
   },
   "dependencies": {
-    "next": "^10.0.9",
-    "next-pwa": "^5.0.6",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "next": "^11.0.1",
+    "next-pwa": "^5.2.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@types/node": "^14.14.35",
-    "@types/react": "^17.0.3",
-    "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@typescript-eslint/parser": "^4.18.0",
-    "eslint": "^7.22.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-react": "^7.22.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
-    "husky": "^5.1.3",
-    "lint-staged": "^10.5.4",
+    "@types/node": "^15.12.4",
+    "@types/react": "^17.0.11",
+    "eslint": "^7.29.0",
+    "eslint-config-next": "^11.0.1",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^6.0.0",
+    "lint-staged": "^11.0.0",
     "pinst": "^2.1.6",
-    "prettier": "^2.2.1",
-    "typescript": "^4.2.3",
-    "webpack": "^5.26.3"
+    "prettier": "^2.3.1",
+    "typescript": "^4.3.4"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=12.13.0"
   }
 }

pages/_app.tsx

@@ -1,6 +1,7 @@
-import '../styles/globals.css';
 import { AppProps /* , AppContext */ } from 'next/app';
 
+import 'styles/globals.css';
+
 function App({ Component, pageProps }: AppProps) {
   return <Component {...pageProps} />;
 }

pages/api/hello.ts

@@ -4,6 +4,6 @@ type Data = {
   name: string;
 };
 
-export default (_: NextApiRequest, res: NextApiResponse<Data>) => {
+export default function Main(_: NextApiRequest, res: NextApiResponse<Data>) {
   res.status(200).json({ name: 'John Doe' });
-};
+}

pages/index.tsx

@@ -1,24 +1,20 @@
-import styles from '../styles/Home.module.css';
-import Nav from '../components/nav';
+import Image from 'next/image';
+
+import styles from 'styles/Home.module.css';
+import Nav from 'components/nav';
 
 export default function Home() {
   return (
     <div className={styles.container}>
       <Nav />
       <main className={styles.main}>
         <h1 className={styles.title}>
-          Welcome to
-          {' '}
-          <a href="https://nextjs.org">Next.js</a>
-          {' '}
-          +
-          {' '}
+          Welcome to <a href="https://nextjs.org">Next.js</a> +{' '}
           <a href="https://www.npmjs.com/package/next-pwa">PWA!</a>
         </h1>
 
         <p className={styles.description}>
-          Get started by editing
-          {' '}
+          Get started by editing{' '}
           <code className={styles.code}>pages/index.tsx</code>
         </p>
 
@@ -59,9 +55,14 @@ export default function Home() {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Powered by
-          {' '}
-          <img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
+          Powered by{' '}
+          <Image
+            src="/vercel.svg"
+            alt="Vercel Logo"
+            className={styles.logo}
+            width={70}
+            height={70}
+          />
         </a>
       </footer>
     </div>

tsconfig.json

@@ -41,7 +41,7 @@
     // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
     /* Module Resolution Options */
     "moduleResolution": "node" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
-    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    "baseUrl": "./" /* Base directory to resolve non-absolute module names. */,
     // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */