feat: replace to next.js (#649)

.github/workflows/ci.yml

@@ -3,10 +3,10 @@ name: Node CI
 on:
   pull_request:
     branches:
-    - master
+      - master
   push:
     branches:
-    - master
+      - master
 
 jobs:
   test:
@@ -15,16 +15,11 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-    - uses: actions/checkout@master
-    - name: Use Node.js v10.x
-      uses: actions/setup-node@v1
-      with:
-        node-version: 10.x
-    - name: Install dependencies
-      run: yarn install --frozen-lockfile
-    - name: Lint
-      run: yarn format-check
-    - name: Run tests
-      env:
-        CI: 'true'
-      run: yarn test
+      - uses: actions/checkout@master
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - run: yarn format-check
+      - run: yarn lint

.gitignore

@@ -1,3 +1,4 @@
-/build/
+/.next/
+/.now/
 /node_modules/
 /yarn-error.log

.prettierignore

@@ -0,0 +1 @@
+.gitignore

next-env.d.ts

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

next.config.js

@@ -0,0 +1,73 @@
+const withOffline = require('next-offline')
+
+const nextConfig = {
+  experimental: {
+    headers: () => [
+      {
+        headers: [
+          {
+            key: 'cache-control',
+            value: 'max-age=600, s-maxage=60'
+          },
+          {
+            key: 'content-security-policy',
+            value:
+              "connect-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; default-src 'none'; font-src https://fonts.gstatic.com; frame-src 'self'; img-src 'self' data:; manifest-src 'self'; sandbox allow-popups allow-same-origin allow-scripts; script-src 'self' 'unsafe-inline' https://storage.googleapis.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; worker-src 'self'"
+          },
+          {
+            key: 'referrer-policy',
+            value: 'same-origin, strict-origin-when-cross-origin'
+          }
+        ],
+        source: '/((?!_next).*)'
+      },
+      {
+        headers: [
+          {
+            key: 'content-security-policy',
+            value:
+              "default-src 'none'; font-src https://fonts.gstatic.com; img-src 'self' data:; script-src 'unsafe-inline' https://polyfill.io; style-src 'unsafe-inline' blob: https://fonts.googleapis.com"
+          }
+        ],
+        source: '/preview/(.*)'
+      },
+      {
+        headers: [
+          {
+            key: 'cache-control',
+            value: 'max-age=0'
+          }
+        ],
+        source: '/service-worker.js'
+      },
+      {
+        headers: [
+          {
+            key: 'content-type',
+            value: 'application/manifest+json'
+          }
+        ],
+        source: '/manifest.json'
+      }
+    ],
+    modern: true,
+    plugins: true,
+    rewrites: () => [
+      {
+        destination: '/_next/static/service-worker.js',
+        source: '/service-worker.js'
+      },
+      {
+        destination: '/_next/static/service-worker.js.map',
+        source: '/service-worker.js.map'
+      }
+    ]
+  },
+  workboxOpts: {
+    clientsClaim: true,
+    skipWaiting: true,
+    swDest: 'static/service-worker.js'
+  }
+}
+
+module.exports = withOffline(nextConfig)

now.json

@@ -1,62 +1,6 @@
 {
-  "alias": ["chat-styles.app"],
-  "builds": [
-    {
-      "config": {
-        "distDir": "build"
-      },
-      "src": "package.json",
-      "use": "@now/static-build"
-    }
-  ],
   "github": {
     "silent": true
   },
-  "name": "chat-styles",
-  "routes": [
-    {
-      "headers": {
-        "cache-control": "max-age=0"
-      },
-      "src": "/service-worker\\.js"
-    },
-    {
-      "headers": {
-        "cache-control": "max-age=600, s-maxage=60",
-        "content-type": "application/manifest+json"
-      },
-      "src": "/manifest\\.json"
-    },
-    {
-      "headers": {
-        "cache-control": "max-age=600, s-maxage=60"
-      },
-      "src": "/(?:favicon(?:\\.ico|-.*\\.png)|apple-touch-icon\\.png)"
-    },
-    {
-      "headers": {
-        "cache-control": "max-age=600, s-maxage=60",
-        "content-security-policy": "default-src 'none'; font-src https://fonts.gstatic.com; img-src 'self' data:; script-src 'unsafe-inline' https://polyfill.io; style-src 'unsafe-inline' blob: https://fonts.googleapis.com"
-      },
-      "src": "/preview/.*"
-    },
-    {
-      "headers": {
-        "cache-control": "immutable, max-age=31536000"
-      },
-      "src": "/(?:.*\\.(?:css|js)(\\.map)?|images/.+)"
-    },
-    {
-      "dest": "index.html",
-      "headers": {
-        "cache-control": "max-age=600, s-maxage=60",
-        "content-security-policy": "connect-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; default-src 'none'; font-src https://fonts.gstatic.com; frame-src 'self'; img-src 'self' data:; manifest-src 'self'; sandbox allow-popups allow-same-origin allow-scripts; script-src 'self' 'unsafe-inline' https://storage.googleapis.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; worker-src 'self'",
-        "referrer-policy": "same-origin"
-      },
-      "src": "/.*"
-    }
-  ],
-  "regions": ["hnd1"],
-  "scope": "ykzts",
-  "version": 2
+  "regions": ["hnd1"]
 }

package.json

@@ -7,10 +7,13 @@
     "@material-ui/core": "^4.9.10",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/styles": "^4.9.10",
+    "@next/plugin-material-ui": "^9.3.4",
     "classnames": "^2.2.6",
     "copy-text-to-clipboard": "^2.2.0",
     "formik": "^2.1.4",
     "localforage": "^1.7.3",
+    "next": "^9.3.4",
+    "next-offline": "^5.0.0",
     "prismjs": "^1.20.0",
     "react": "^16.13.1",
     "react-color": "^2.18.0",
@@ -20,28 +23,27 @@
   },
   "description": "Chat Styles is a generator of style sheet for the YouTube Live Chat.",
   "devDependencies": {
+    "@inabagumi/eslint-config-react": "^5.1.1",
     "@inabagumi/prettier-config": "^1.1.2",
     "@types/classnames": "^2.2.10",
     "@types/jest": "^25.2.1",
     "@types/node": "^12.12.35",
     "@types/prismjs": "^1.16.0",
     "@types/react": "^16.9.34",
     "@types/react-color": "^3.0.1",
-    "@types/react-dom": "^16.9.6",
     "@types/react-helmet": "^5.0.15",
-    "@types/react-router-dom": "^5.1.4",
-    "node-sass": "^4.13.1",
+    "eslint": "^6.8.0",
     "prettier": "^2.0.4",
-    "react-scripts": "^3.4.1",
     "typescript": "^3.8.3"
   },
   "engines": {
-    "node": "^10.13.0"
+    "node": "12.x"
   },
   "eslintConfig": {
     "extends": [
-      "react-app"
-    ]
+      "@inabagumi/react"
+    ],
+    "root": true
   },
   "homepage": "https://chat-styles.app/",
   "license": "MIT",
@@ -53,12 +55,12 @@
     "url": "https://github.com/ykzts/chat-styles.git"
   },
   "scripts": {
-    "build": "react-scripts build",
-    "dev": "react-scripts start",
-    "format": "prettier --ignore-path .gitignore --write \"**/*.{html,js,json,scss,ts,tsx}\"",
-    "format-check": "prettier --ignore-path .gitignore --check \"**/*.{html,js,json,scss,ts,tsx}\"",
-    "now-build": "${npm_execpath} run build",
-    "test": "react-scripts test"
+    "build": "next build",
+    "dev": "next",
+    "format": "prettier --write .",
+    "format-check": "prettier -c .",
+    "lint": "eslint --ext .ts,.tsx .",
+    "start": "next start"
   },
   "version": "3.0.0"
 }

src/components/atoms/AutoSave/AutoSave.tsx

@@ -1,18 +1,16 @@
 import { useFormikContext } from 'formik'
-import React, { FC, ReactElement, useEffect } from 'react'
+import React, { FC, useEffect } from 'react'
 
-const AutoSave: FC = (): ReactElement => {
+const AutoSave: FC = () => {
   const { submitForm } = useFormikContext()
 
-  useEffect((): (() => void) => {
+  useEffect(() => {
     const interval = setInterval(() => {
       submitForm()
     }, 500)
 
-    return () => {
-      clearInterval(interval)
-    }
-  }, [])
+    return (): void => clearInterval(interval)
+  }, [submitForm])
 
   return <></>
 }