build: migrate to Next.js 13, React 18, Github Action v4 (#109)

* build: upgrage to next.js 13 react 18 * chore: change import for next/image * fix: use legacy behavior for links * ci: use Node.js 18 * ci: upgrade Github Actions to v4 * feat: use new Image component and fix icon issue * style: fix typo * refactor: migrate to the new Link * fix: fix hydration error on listing page * chore: increase large data threashold to 1 MB * ci: upgrade await action to v2 * ci: fix incorrect Vercel deployment URL * ci: pass new secret fot Vercel Team
dazedbear · May 27, 2024 · 9858d7a · 9858d7a
1 parent 69c1eec
commit 9858d7a
Show file tree

Hide file tree

Showing 20 changed files with 3,203 additions and 17,643 deletions.
diff --git a/.github/workflows/failsafe.yml b/.github/workflows/failsafe.yml
@@ -20,6 +20,8 @@ jobs:
     if: (github.event_name == 'push' || github.event_name == 'pull_request') && (github.actor != 'dependabot[bot]')
     secrets:
       VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+      VERCEL_TEAM_ID: ${{ secrets.VERCEL_TEAM_ID }}
 
   failsafe-generation-stage:
     name: Failsafe Page Generation (Stage Deployment)
@@ -31,11 +33,11 @@ jobs:
       VERCEL_URL: ${{ needs.wait-for-deployment.outputs.vercel-deployment-url }}
     steps:
       - name: Checkout project source
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: Install dependency
         run: npm install --legacy-peer-deps
       - name: Run failsafe generation
@@ -44,7 +46,7 @@ jobs:
         run: npx playwright install --with-deps
       - name: Run failsafe e2e tests
         run: npm run test:e2e:failsafe
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: stage-deployment-failsafe-test-report
@@ -62,11 +64,11 @@ jobs:
       NEXT_PUBLIC_APP_ENV: production
     steps:
       - name: Checkout project source
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: Install dependency
         run: npm install --legacy-peer-deps
       - name: Run failsafe generation
@@ -75,7 +77,7 @@ jobs:
         run: npx playwright install --with-deps
       - name: Run failsafe e2e tests
         run: npm run test:e2e:failsafe
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: production-deployment-failsafe-test-report
@@ -93,11 +95,11 @@ jobs:
       NEXT_PUBLIC_APP_ENV: production
     steps:
       - name: Checkout project source
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: Install dependency
         run: npm install --legacy-peer-deps
       - name: Run failsafe generation
@@ -106,7 +108,7 @@ jobs:
         run: npx playwright install --with-deps
       - name: Run failsafe e2e tests
         run: npm run test:e2e:failsafe
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: production-schedule-failsafe-test-report

diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -14,6 +14,8 @@ jobs:
     if: (github.event_name == 'push' || github.event_name == 'pull_request') && (github.actor != 'dependabot[bot]')
     secrets:
       VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
+      VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+      VERCEL_TEAM_ID: ${{ secrets.VERCEL_TEAM_ID }}
 
   playwright-e2e-test-stage:
     name: Playwright E2E Tests (Stage Deployment)
@@ -25,17 +27,17 @@ jobs:
       NEXT_PUBLIC_APP_ENV: stage
       VERCEL_URL: ${{ needs.wait-for-deployment.outputs.vercel-deployment-url }}
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: 18.x
       - name: Install dependencies
         run: npm ci --legacy-peer-deps
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
       - name: Run Playwright tests
         run: npm run test:e2e:page; npm run test:e2e:api;
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: stage-deployment-page-api-test-report
@@ -54,17 +56,17 @@ jobs:
     env:
       NEXT_PUBLIC_APP_ENV: production
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: 18.x
       - name: Install dependencies
         run: npm ci --legacy-peer-deps
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
       - name: Run Playwright tests
         run: npm run test:e2e:page; npm run test:e2e:api;
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: production-deployment-page-api-test-report
@@ -82,17 +84,17 @@ jobs:
     env:
       NEXT_PUBLIC_APP_ENV: production
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.x'
+          node-version: 18.x
       - name: Install dependencies
         run: npm ci --legacy-peer-deps
       - name: Install Playwright Browsers
         run: npx playwright install --with-deps
       - name: Run Playwright tests
         run: npm run test:e2e:page; npm run test:e2e:api;
-      - uses: actions/upload-artifact@v2
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           name: production-schedule-page-api-test-report

diff --git a/.github/workflows/release-note.yml b/.github/workflows/release-note.yml
@@ -13,11 +13,11 @@ jobs:
       HUSKY: 0
     steps:
       - name: Checkout project source
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
       - name: Use Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
-          node-version: 16.x
+          node-version: 18.x
       - name: Install dependency
         run: npm ci --legacy-peer-deps
       - name: Release Note

diff --git a/.github/workflows/semgrep-analysis.yml b/.github/workflows/semgrep-analysis.yml
@@ -25,7 +25,7 @@ jobs:
     if: (github.actor != 'dependabot[bot]')
     steps:
       # Checkout project source
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       # Scan code using project's configuration on https://semgrep.dev/manage
       - name: Semgrep Scan

diff --git a/.github/workflows/vercel-deployment.yml b/.github/workflows/vercel-deployment.yml
@@ -9,6 +9,10 @@ on:
     secrets:
       VERCEL_TOKEN:
         required: true
+      VERCEL_PROJECT_ID:
+        required: true
+      VERCEL_TEAM_ID:
+        required: true
 
 env:
   VERCEL_FETCH_DEPLOYMENTS_API_ENDPOINT: https://api.vercel.com/v6/deployments
@@ -28,14 +32,15 @@ jobs:
           echo "Fetching Vercel deployments using API endpoint: " $VERCEL_FETCH_DEPLOYMENTS_API_ENDPOINT
 
           # Fetch all Vercel deployment from this project
-          ALL_VERCEL_DEPLOYMENTS=`curl -H 'Accept: application/json' -H 'Content-Type: application/json' -H 'Authorization: Bearer ${{ secrets.VERCEL_TOKEN }}' $VERCEL_FETCH_DEPLOYMENTS_API_ENDPOINT`
+          API_ENDPOINT="${VERCEL_FETCH_DEPLOYMENTS_API_ENDPOINT}?projectId=${{ secrets.VERCEL_PROJECT_ID }}&teamId=${{ secrets.VERCEL_TEAM_ID }}"
+          ALL_VERCEL_DEPLOYMENTS=`curl -H 'Accept: application/json' -H 'Content-Type: application/json' -H 'Authorization: Bearer ${{ secrets.VERCEL_TOKEN }}' $API_ENDPOINT`
           echo "Vercel deployments: " $ALL_VERCEL_DEPLOYMENTS
 
           # Parse the deployments (as json) to find the latest deployment url, while stripping the double quotes
           VERCEL_DEPLOYMENT_URL=`echo $ALL_VERCEL_DEPLOYMENTS | jq '.deployments [0].url' | tr -d \"`
           echo "VERCEL_DEPLOYMENT_URL=$VERCEL_DEPLOYMENT_URL" >> $GITHUB_ENV
       - name: Wait for Vercel deployment to be ready
-        uses: UnlyEd/github-action-await-vercel@v1
+        uses: UnlyEd/github-action-await-vercel@v2
         id: await-vercel
         env:
           VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
@@ -44,6 +49,6 @@ jobs:
           timeout: 240 # Wait for 4 mins before failing
       - name: Expose Vercel deployment info
         id: expose-vercel-deployment
-        run: echo "::set-output name=vercel-deployment-url::${{ env.VERCEL_DEPLOYMENT_URL }}"
+        run: echo "vercel-deployment-url=${{ env.VERCEL_DEPLOYMENT_URL }}" >> $GITHUB_OUTPUT
       - name: Display Vercel deployment status
         run: 'echo The deployment at ${{ fromJson(steps.await-vercel.outputs.deploymentDetails).url }} is ${{ fromJson(steps.await-vercel.outputs.deploymentDetails).readyState }}'
diff --git a/next.config.js b/next.config.js
@@ -52,6 +52,10 @@ module.exports = withBundleAnalyzer({
     domains: ['images.unsplash.com', 'www.notion.so', 'dazedbear.notion.site'],
   },
 
+  experimental: {
+    largePageDataBytes: 1000000, // 1 MB
+  },
+
   async rewrites() {
     return {
       beforeFiles: [