Merge pull request #322 from uyupun/chore/319_upgrade-next-and-yarn

Nextjsのバージョンを上げる

.cspell.json

@@ -8,7 +8,9 @@
     "node_modules/**",
     "out/**",
     "**/*.avif",
-    "public/fonts/LICENSE"
+    "public/fonts/LICENSE",
+    "storybook-static/**",
+    ".yarn/**"
   ],
   "overrides": [
     {
@@ -20,6 +22,7 @@
         "chromaui",
         "cica",
         "clsx",
+        "corepack",
         "dbaeumer",
         "esbenp",
         "ghpages",

.github/workflows/deploy-chromatic.yml

@@ -22,21 +22,24 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18.15.0
+          node-version: 18.17.0
+
+      - name: Upgrade to yarn
+        run: yarn set version 4.0.2
 
       - name: Get yarn cache directory path
-        id: yarn_cache_dir_path
-        run: echo "YARN_CACHE_DIR_PATH=$(yarn cache dir)" >> $GITHUB_ENV
+        id: package_manager_cache_dir_path
+        run: echo "PACKAGE_MANAGER_CACHE_DIR_PATH=$(yarn config get cacheFolder)" >> $GITHUB_ENV
 
       - name: Cache yarn cache directory
         uses: actions/cache@v3
         with:
-          path: ${{ env.YARN_CACHE_DIR_PATH }}
+          path: ${{ env.PACKAGE_MANAGER_CACHE_DIR_PATH }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: yarn install --immutable --immutable-cache --check-cache
+        run: yarn install --immutable --check-cache
 
       - name: Publish to Chromatic
         uses: chromaui/action@v1

.github/workflows/publish-ghpages.yml

@@ -18,21 +18,24 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18.15.0
+          node-version: 18.17.0
+
+      - name: Upgrade to yarn
+        run: yarn set version 4.0.2
 
       - name: Get yarn cache directory path
-        id: yarn_cache_dir_path
-        run: echo "YARN_CACHE_DIR_PATH=$(yarn cache dir)" >> $GITHUB_ENV
+        id: package_manager_cache_dir_path
+        run: echo "PACKAGE_MANAGER_CACHE_DIR_PATH=$(yarn config get cacheFolder)" >> $GITHUB_ENV
 
       - name: Cache yarn cache directory
         uses: actions/cache@v3
         with:
-          path: ${{ env.YARN_CACHE_DIR_PATH }}
+          path: ${{ env.PACKAGE_MANAGER_CACHE_DIR_PATH }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: yarn install --immutable --immutable-cache --check-cache
+        run: yarn install --immutable --check-cache
 
       - name: Generate directory name
         id: dir_name
@@ -70,21 +73,24 @@ jobs:
       - name: Use Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 18.15.0
+          node-version: 18.17.0
+
+      - name: Upgrade to yarn
+        run: yarn set version 4.0.2
 
       - name: Get yarn cache directory path
-        id: yarn_cache_dir_path
-        run: echo "YARN_CACHE_DIR_PATH=$(yarn cache dir)" >> $GITHUB_ENV
+        id: package_manager_cache_dir_path
+        run: echo "PACKAGE_MANAGER_CACHE_DIR_PATH=$(yarn config get cacheFolder)" >> $GITHUB_ENV
 
       - name: Cache yarn cache directory
         uses: actions/cache@v3
         with:
-          path: ${{ env.YARN_CACHE_DIR_PATH }}
+          path: ${{ env.PACKAGE_MANAGER_CACHE_DIR_PATH }}
           key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
           restore-keys: ${{ runner.os }}-yarn-
 
       - name: Install dependencies
-        run: yarn install --immutable --immutable-cache --check-cache
+        run: yarn install --immutable --check-cache
 
       - name: Build Next.js app
         run: yarn build

.gitignore

@@ -2,8 +2,6 @@
 
 # dependencies
 /node_modules
-/.pnp
-.pnp.js
 
 # testing
 /coverage
@@ -40,3 +38,12 @@ storybook-static/
 
 # lighthouse
 localhost_*.report.html
+
+# yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.node-version

@@ -1 +1 @@
-18.15.0
+18.17.0

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.storybook/main.ts

@@ -14,9 +14,6 @@ const config: StorybookConfig = {
     autodocs: true,
   },
   staticDirs: ['../public'],
-  core: {
-    builder: '@storybook/builder-webpack5',
-  },
   webpackFinal: async (config) =>
     merge(config, {
       plugins: [new VanillaExtractPlugin()],

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

docs/installation.md

@@ -1,5 +1,7 @@
 # 環境構築
 
+開発環境にはNode.js v18.17.0を使用する。
+
 ```bash
 # リポジトリのクローン
 $ git clone https://github.com/uyupun/official.git
@@ -10,6 +12,10 @@ $ cd official
 # envファイルの作成
 $ cp .env.example .env
 
+# Corepackの有効化
+# Corepackを有効化してYarn (Berry)を使用できるようにするため(https://yarnpkg.com/corepack)
+$ corepack enable
+
 # 依存パッケージのインストール
 $ yarn install
 

docs/tech.md

@@ -2,6 +2,8 @@
 
 ## 開発環境
 
+- [Node.js](https://nodejs.org)
+- [Yarn (Berry)](https://yarnpkg.com)
 - [Next.js](https://nextjs.org)
 - [TypeScript](https://www.typescriptlang.org)
 

next.config.js

@@ -4,6 +4,7 @@ const withVanillaExtract = createVanillaExtractPlugin();
 
 const nextConfig = {
   reactStrictMode: true,
+  output: 'export',
 };
 
 export default withVanillaExtract(nextConfig);

package.json

@@ -5,8 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "next dev",
-    "build": "yarn pathpida && next build && next export",
-    "start": "next start",
+    "build": "yarn pathpida && next build",
+    "start": "serve out",
     "lint:eslint": "eslint --max-warnings 0 . --ignore-path .eslintignore --cache --cache-strategy content --cache-file=node_modules/.cache/eslint/.eslintcache",
     "lint:prettier": "prettier --check . --ignore-path .prettierignore --cache --cache-strategy content",
     "lint:ls": "ls-lint",
@@ -28,26 +28,26 @@
     "@headlessui/react": "^1.7.4",
     "@hookform/resolvers": "^2.9.11",
     "clsx": "^1.2.1",
-    "next": "13.5.0",
+    "next": "14.0.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "7.43.7",
     "zod": "^3.22.4"
   },
   "devDependencies": {
     "@ls-lint/ls-lint": "^2.0.0",
-    "@storybook/addon-a11y": "^7.0.26",
-    "@storybook/addon-actions": "^7.0.26",
-    "@storybook/addon-essentials": "^7.0.26",
-    "@storybook/addon-links": "^7.0.26",
-    "@storybook/nextjs": "^7.0.26",
-    "@storybook/react": "^7.0.26",
+    "@storybook/addon-a11y": "^7.5.3",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/nextjs": "^7.5.3",
+    "@storybook/react": "^7.5.3",
     "@svgr/cli": "^6.5.1",
     "@types/micromatch": "^4.0.2",
     "@types/minimist": "^1.2.2",
-    "@types/node": "18.15.0",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
+    "@types/node": "18.17.0",
+    "@types/react": "18.2.37",
+    "@types/react-dom": "18.2.15",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@vanilla-extract/css": "^1.12.0",
     "@vanilla-extract/next-plugin": "^2.1.3",
@@ -63,7 +63,7 @@
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-storybook": "^0.6.12",
+    "eslint-plugin-storybook": "^0.6.15",
     "git-cz": "^4.9.0",
     "husky": "^7.0.0",
     "lighthouse": "^10.3.0",
@@ -73,21 +73,25 @@
     "modern-css-reset": "^1.4.0",
     "pathpida": "^0.20.1",
     "prettier": "^2.8.3",
+    "serve": "^14.2.1",
     "sharp": "^0.32.1",
-    "storybook": "^7.0.26",
+    "storybook": "^7.5.3",
     "ts-node": "^10.9.1",
     "typescript": "4.9.5",
     "webpack-merge": "^5.9.0"
   },
   "engines": {
-    "node": "18.15.0"
+    "node": "18.17.0",
+    "npm": "use yarn instead",
+    "yarn": "4.0.2"
   },
   "resolutions": {
-    "@types/react": "18.0.28"
+    "@types/react": "18.2.37"
   },
   "config": {
     "commitizen": {
       "path": "git-cz"
     }
-  }
+  },
+  "packageManager": "yarn@4.0.2"
 }