feat(Next > TypeScript): Add TypeScript with some errors, lint, test

config.json

@@ -5,7 +5,7 @@
   "storybookPort": 6006,
   "defaultAlbum": "sample",
   "defaultGallery": "demo",
-  "defaultZoom": "10",
+  "defaultZoom": 10,
   "resizeDimensions": {
     "photo": { "width": 1024, "height": 768 },
     "thumb": { "width": 185, "height": 45 },

next/.eslintrc.js

@@ -6,11 +6,20 @@ module.exports = {
   rules: {
     'max-len': [2, 150, 4], // increase page width
     semi: [2, 'never'], // remove semicolons
-    'react/prop-types': 'off',
+    'react/prop-types': 'off', // instead use typescript
+    'react/require-default-props': 'off', // instead use typescript
     'react/react-in-jsx-scope': 'off', // Next.js magically includes
     'react/jsx-one-expression-per-line': 'off', // too vertical
     'jsx-a11y/anchor-is-valid': 'off', // next/link breaks this rule
     'react-hooks/exhaustive-deps': 'off', // exhaustive is excessive
+    'react/jsx-filename-extension': [2, { extensions: ['.jsx', '.tsx'] }], // support React in TypeScript
+    'import/extensions': ['error', 'ignorePackages', {
+      js: 'never',
+      mjs: 'never',
+      jsx: 'never',
+      ts: 'never',
+      tsx: 'never',
+    }], // support React in TypeScript
   },
   env: {
     jest: true,

next/.gitignore

@@ -1,12 +1,10 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
 
 # testing
 /coverage
+test-results/
+playwright-report/
 
 # next.js
 /.next/
@@ -32,5 +30,6 @@ yarn-error.log*
 
 # vercel
 .vercel
-test-results/
-playwright-report/
+
+# typescript
+tsconfig.tsbuildinfo

next/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.