[optimize] upgrade to Next.js 14 & other Upstream packages (#20)

.github/workflows/deploy-production.yml

@@ -20,7 +20,7 @@ jobs:
       packages: write
       contents: read
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Inject Environment variables
         run: |

.github/workflows/pull-request.yml

@@ -13,7 +13,7 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
 
       - name: Deploy to Vercel

Dockerfile

@@ -1,21 +1,23 @@
-FROM node:18-slim
+# Reference: https://pnpm.io/docker#example-1-build-a-bundle-in-a-docker-container
 
-USER root
+FROM node:18-slim AS base
+RUN apt-get update && \
+    apt-get install curl -y --no-install-recommends
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+COPY . /app
+WORKDIR /app
 
-RUN npm rm yarn -g
-RUN npm i pnpm -g
+FROM base AS prod-deps
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm i --prod --frozen-lockfile
 
-RUN mkdir /home/node/app
-WORKDIR /home/node/app
-
-COPY package.json pnpm-lock.yaml .npmrc /home/node/app/
-RUN pnpm i --frozen-lockfile
-
-COPY . /home/node/app
+FROM base AS build
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm i --frozen-lockfile
 RUN pnpm build
 
-RUN pnpm prune --prod || true \
-    pnpm store prune
-
+FROM base
+COPY --from=prod-deps /app/node_modules /app/node_modules
+COPY --from=build /app/dist /app/dist
 EXPOSE 3000
 CMD ["npm", "start"]

README.md

@@ -2,16 +2,18 @@
 
 [React][1] project scaffold based on [TypeScript][2], [Next.js][3], [Bootstrap][4] & [Workbox][5]. And this project bootstrapped with [`create-next-app`][6].
 
-[![NPM Dependency](https://david-dm.org/ideamall/pwa.svg)][7]
-[![CI & CD](https://github.com/IdeaMall/PWA/actions/workflows/main.yml/badge.svg)][8]
+[![CI & CD](https://github.com/IdeaMall/PWA/actions/workflows/main.yml/badge.svg)][7]
+
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)][8]
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][9]
 
 ## Technology stack
 
 - Language: [TypeScript v5][2]
-- Component engine: [Nextjs v13][3]
+- Component engine: [Nextjs v14][3]
 - Component suite: [Bootstrap v5][4]
 - PWA framework: [Workbox v6][5]
-- State management: [MobX v6][9]
+- State management: [MobX v6][10]
 - CI / CD: GitHub [Actions][11] + [Vercel][12]
 
 ## Getting Started
@@ -61,9 +63,10 @@ pnpm container
 [4]: https://getbootstrap.com/
 [5]: https://developers.google.com/web/tools/workbox
 [6]: https://github.com/vercel/next.js/tree/canary/packages/create-next-app
-[7]: https://david-dm.org/ideamall/pwa
-[8]: https://github.com/IdeaMall/PWA/actions/workflows/main.yml
-[9]: https://github.com/mobxjs/mobx/tree/mobx4and5/docs
+[7]: https://github.com/IdeaMall/PWA/actions/workflows/main.yml
+[8]: https://codespaces.new/ideaMall/PWA
+[9]: https://gitpod.io/?autostart=true#https://github.com/ideaMall/PWA
+[10]: https://mobx.js.org/
 [11]: https://github.com/features/actions
 [12]: https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme
 [13]: https://nextjs.org/docs/api-routes/introduction

components/AdminFrame.tsx

@@ -10,8 +10,7 @@ import userStore from '../models/User';
 import { MainNavigator } from './MainNavigator';
 import { PageHead } from './PageHead';
 
-const SessionBox = dynamic(() => import('./SessionBox'), { ssr: false }),
-  { location } = globalThis,
+const { location } = globalThis,
   { t } = i18n;
 
 @observer
@@ -47,7 +46,7 @@ export class AdminFrame extends PureComponent<PropsWithChildren> {
       routes.find(({ path }) => this.routeOf(path).active) || {};
 
     return (
-      <SessionBox autoCover roles={[Role.Administrator, Role.Manager]}>
+      <>
         <PageHead title={`${title} - ${t('administrator')}`} />
 
         <MainNavigator fluid />
@@ -86,7 +85,7 @@ export class AdminFrame extends PureComponent<PropsWithChildren> {
             {children}
           </Container>
         </div>
-      </SessionBox>
+      </>
     );
   }
 }

docker-compose.yml

@@ -13,6 +13,25 @@ services:
       - 3000:3000
     networks:
       - ideamall
+    healthcheck:
+      test: ['CMD-SHELL', 'curl -f http://localhost:3000/ || exit 1']
+      interval: 3s
+      retries: 5
+      start_period: 30s
+    labels:
+      - 'autoheal=true'
+    restart: always
+    logging:
+      driver: 'json-file'
+      options:
+        max-size: '10m'
+
+  autoheal:
+    image: willfarrell/autoheal:1.2.0
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+    restart: always
+
   caddy:
     depends_on:
       - pwa

package.json

@@ -4,43 +4,43 @@
   "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.",
   "private": true,
   "dependencies": {
-    "@authing/guard": "^5.3.0",
+    "@authing/guard": "^5.3.2",
     "@ideamall/data-service": "^1.0.0-alpha.1",
     "idea-react": "^1.0.0-rc.30",
-    "koajax": "^0.9.4",
+    "koajax": "^0.9.6",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "lodash": "^4.17.21",
-    "mobx": "^6.10.2",
-    "mobx-i18n": "^0.4.1",
-    "mobx-react": "^9.0.1",
+    "mobx": "~6.10.2",
+    "mobx-i18n": "^0.4.2",
+    "mobx-react": "~9.0.2",
     "mobx-react-helper": "^0.2.7",
     "mobx-restful": "^0.6.12",
-    "mobx-restful-table": "^1.2.0",
-    "next": "^13.5.3",
+    "mobx-restful-table": "^1.2.2",
+    "next": "^14.0.3",
     "next-pwa": "~5.6.0",
-    "next-ssr-middleware": "^0.5.1",
+    "next-ssr-middleware": "^0.6.1",
     "next-with-less": "^3.0.1",
     "react": "^18.2.0",
-    "react-bootstrap": "^2.9.0",
+    "react-bootstrap": "^2.9.1",
     "react-bootstrap-editor": "^1.0.5",
     "react-dom": "^18.2.0",
     "web-utility": "^4.1.3"
   },
   "devDependencies": {
-    "@octokit/openapi-types": "^19.0.0",
-    "@types/lodash": "^4.14.199",
-    "@types/node": "^18.18.3",
-    "@types/react": "^18.2.24",
-    "eslint": "^8.50.0",
-    "eslint-config-next": "^13.5.3",
+    "@octokit/openapi-types": "^19.1.0",
+    "@types/lodash": "^4.14.202",
+    "@types/node": "^18.18.13",
+    "@types/react": "^18.2.39",
+    "eslint": "^8.54.0",
+    "eslint-config-next": "^14.0.3",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
-    "lint-staged": "^14.0.1",
-    "prettier": "^3.0.3",
+    "lint-staged": "^15.1.0",
+    "prettier": "^3.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "~5.2.2"
+    "typescript": "~5.3.2"
   },
   "prettier": {
     "singleQuote": true,

pages/_document.tsx

@@ -11,15 +11,11 @@ export default function Document() {
 
         <link
           rel="stylesheet"
-          href="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
+          href="https://unpkg.com/bootstrap@5.3.2/dist/css/bootstrap.min.css"
         />
         <link
           rel="stylesheet"
-          href="https://unpkg.com/idea-react@1.0.0-alpha.0/dist/index.css"
-        />
-        <link
-          rel="stylesheet"
-          href="https://unpkg.com/bootstrap-icons@1.10.2/font/bootstrap-icons.css"
+          href="https://unpkg.com/bootstrap-icons@1.11.1/font/bootstrap-icons.css"
         />
       </Head>
 

pages/admin/category.tsx

@@ -1,9 +1,10 @@
-import { Category, UserInputData } from '@ideamall/data-service';
+import { Category, Role, UserInputData } from '@ideamall/data-service';
 import { ClickBoundary, Loading, SpinnerButton } from 'idea-react';
 import { computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { FileUploader } from 'mobx-restful-table';
-import { createRef, FormEvent, MouseEvent, PureComponent } from 'react';
+import dynamic from 'next/dynamic';
+import { createRef,FormEvent, MouseEvent, PureComponent } from 'react';
 import { Col, FloatingLabel, Form } from 'react-bootstrap';
 import { formToJSON } from 'web-utility';
 
@@ -13,11 +14,17 @@ import fileStore from '../../models/File';
 import { i18n } from '../../models/Translation';
 import userStore from '../../models/User';
 
+const SessionBox = dynamic(() => import('../../components/SessionBox'), {
+  ssr: false,
+});
+
 export default function CategoryAdminPage() {
   return (
-    <AdminFrame>
-      <CategoryAdmin />
-    </AdminFrame>
+    <SessionBox autoCover roles={[Role.Administrator, Role.Manager]}>
+      <AdminFrame>
+        <CategoryAdmin />
+      </AdminFrame>
+    </SessionBox>
   );
 }
 

pages/admin/goods/[id].tsx

@@ -1,4 +1,4 @@
-import { Goods } from '@ideamall/data-service';
+import { Goods, Role } from '@ideamall/data-service';
 import { Loading, SpinnerButton } from 'idea-react';
 import { observer } from 'mobx-react';
 import { FormField } from 'mobx-restful-table';
@@ -19,6 +19,9 @@ import fileStore from '../../../models/File';
 import { GoodsModel } from '../../../models/Goods';
 import { i18n } from '../../../models/Translation';
 
+const SessionBox = dynamic(() => import('../../../components/SessionBox'), {
+  ssr: false,
+});
 const HTMLEditor = dynamic(() => import('../../../components/HTMLEditor'), {
   ssr: false,
 });
@@ -33,9 +36,11 @@ export default function GoodsEditorPage({
   route: { params },
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   return (
-    <AdminFrame>
-      <GoodsEditor id={params!.id} />
-    </AdminFrame>
+    <SessionBox autoCover roles={[Role.Administrator, Role.Manager]}>
+      <AdminFrame>
+        <GoodsEditor id={params!.id} />
+      </AdminFrame>
+    </SessionBox>
   );
 }
 

pages/admin/goods/index.tsx

@@ -1,7 +1,8 @@
-import { Goods } from '@ideamall/data-service';
+import { Goods, Role } from '@ideamall/data-service';
 import { Loading, text2color } from 'idea-react';
 import { observer } from 'mobx-react';
 import { Pager } from 'mobx-restful-table';
+import dynamic from 'next/dynamic';
 import { PureComponent } from 'react';
 import { Badge, Button, Table } from 'react-bootstrap';
 import { parseURLData } from 'web-utility';
@@ -12,11 +13,17 @@ import { isServer } from '../../../models/Base';
 import { GoodsModel } from '../../../models/Goods';
 import { i18n } from '../../../models/Translation';
 
+const SessionBox = dynamic(() => import('../../../components/SessionBox'), {
+  ssr: false,
+});
+
 export default function GoodsAdminPage() {
   return (
-    <AdminFrame>
-      <GoodsAdmin />
-    </AdminFrame>
+    <SessionBox autoCover roles={[Role.Administrator, Role.Manager]}>
+      <AdminFrame>
+        <GoodsAdmin />
+      </AdminFrame>
+    </SessionBox>
   );
 }
 

pages/admin/index.tsx

@@ -1,17 +1,24 @@
-import { StatisticSummary } from '@ideamall/data-service';
+import { Role, StatisticSummary } from '@ideamall/data-service';
 import { observer } from 'mobx-react';
+import dynamic from 'next/dynamic';
 import { PureComponent } from 'react';
 import { Card, Col, Row } from 'react-bootstrap';
 
 import { AdminFrame } from '../../components/AdminFrame';
 import { StatisticModel } from '../../models/Statistic';
 import { i18n } from '../../models/Translation';
 
+const SessionBox = dynamic(() => import('../../components/SessionBox'), {
+  ssr: false,
+});
+
 export default function AdminHomePage() {
   return (
-    <AdminFrame>
-      <AdminHome />
-    </AdminFrame>
+    <SessionBox autoCover roles={[Role.Administrator, Role.Manager]}>
+      <AdminFrame>
+        <AdminHome />
+      </AdminFrame>
+    </SessionBox>
   );
 }
 

pages/admin/user.tsx

@@ -1,8 +1,9 @@
-import { Gender, User } from '@ideamall/data-service';
+import { Gender, Role, User } from '@ideamall/data-service';
 import { Avatar } from 'idea-react';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react';
 import { Column, RestTable } from 'mobx-restful-table';
+import dynamic from 'next/dynamic';
 import { PureComponent } from 'react';
 import { Container, Form } from 'react-bootstrap';
 
@@ -11,11 +12,17 @@ import { GenderSymbol, RoleName } from '../../components/data';
 import { i18n } from '../../models/Translation';
 import userStore from '../../models/User';
 
+const SessionBox = dynamic(() => import('../../components/SessionBox'), {
+  ssr: false,
+});
+
 export default function UserAdminPage() {
   return (
-    <AdminFrame>
-      <UserAdmin />
-    </AdminFrame>
+    <SessionBox autoCover roles={[Role.Administrator, Role.Manager]}>
+      <AdminFrame>
+        <UserAdmin />
+      </AdminFrame>
+    </SessionBox>
   );
 }