[migrate] upgrade to Next.js 16 & deploy to NorthFlank.com (#90)

Author: TechQuery

.github/workflows/deploy-production.yml

@@ -7,11 +7,6 @@ on:
   push:
     tags:
       - v*
-env:
-  ARTIFACT_PATH: /tmp/artifact.tar
-  BOX_NAME: web-server
-  BOX_URL: idea2app/web-server
-
 jobs:
   deploy_docker_image:
     name: Deploy Docker image
@@ -20,48 +15,41 @@ jobs:
       packages: write
       contents: read
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Inject Environment variables
         run: |
-          echo "BOX_NAME=${BOX_NAME@L}" >> "${GITHUB_ENV}"
-          echo "BOX_URL=${BOX_URL@L}" >> "${GITHUB_ENV}"
           cat > .env.local <<EOF
           ${{ secrets.ENV_FILE }}
           EOF
-      - uses: docker/setup-qemu-action@v3
-      - uses: docker/setup-buildx-action@v3
+          cp .env .env.personal.local
 
-      - name: Build Image
-        uses: docker/build-push-action@v6
+      - uses: docker/[email protected]
         with:
-          context: .
-          platforms: linux/amd64
-          tags: ${{ env.BOX_URL }}:latest
-          outputs: type=docker,dest=${{ env.ARTIFACT_PATH }}
-
-      - name: Pick Docker Compose
-        run: |
-          mkdir ./build
-          mv ${{ env.ARTIFACT_PATH }} ./docker-compose.yml ./start.sh ./build
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ github.token }}
 
-      - name: Transport Image
-        uses: appleboy/[email protected]
+      - uses: docker/[email protected]
+        id: meta
         with:
-          source: ./build/*.*
-          target: /tmp
-          host: ${{ secrets.HOST }}
-          username: ${{ secrets.USER }}
-          password: ${{ secrets.SSH_KEY }}
-          strip_components: 1
+          images: ghcr.io/${{ github.repository }}
 
-      - name: Run Image
-        uses: garygrossgarten/github-action-ssh@release
+      - uses: docker/build-push-action@v6
+        id: push
         with:
-          host: ${{ secrets.HOST }}
-          username: ${{ secrets.USER }}
-          password: ${{ secrets.SSH_KEY }}
-          command: |
-            mv /tmp/docker-compose.yml /tmp/start.sh ~/
-            chmod +x ~/start.sh
-            echo '${{ secrets.SSH_KEY }}' | sudo -S ~/start.sh ${{ env.ARTIFACT_PATH }}
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+
+      - name: deploy to NorthFlank
+        env:
+          PROJECT_ID: idea2app-service
+          SERVICE_ID: idea2app-web
+        run: |
+          curl --request POST \
+              --header "Authorization: Bearer ${{ secrets.NORTHFLANK_API_KEY }}" \
+              --header "Content-Type: application/json" \
+              --data '{"docker":{"configType":"default"},"external":{"credentials":"idea2app-github","imagePath":"ghcr.io/${{ github.repository }}:latest"}}' \
+              https://api.northflank.com/v1/projects/$PROJECT_ID/services/$SERVICE_ID/deployment

README.md

@@ -10,7 +10,7 @@
 ## Technology stack
 
 - Language: [TypeScript v5][2] + [MDX v3][10]
-- Component engine: [Next.js v15][3]
+- Component engine: [Next.js v16][3]
 - Component suite: [Bootstrap v5][4]
 - PWA framework: [Workbox v6][5]
 - State management: [MobX v6][11]
@@ -20,7 +20,6 @@
 ## Best practice
 
 1.  Install GitHub apps in your organization or account:
-
     1.  [Probot settings][15]: set up Issue labels & Pull Request rules
     2.  [PR badge][16]: set up Online [VS Code][17] editor entries in Pull Request description
 

components/Project/PrototypeGenerator.tsx

@@ -34,14 +34,12 @@ export class PrototypeGenerator extends ObservedComponent<PrototypeGeneratorProp
   }
 
   async pollStatusCheck() {
-    const { props, version } = this,
-      rootElement = this.root.current;
+    const rootElement = this.root.current;
 
-    while (version?.status === 'pending' || version?.status === 'processing') {
+    while (this.version?.status === 'pending' || this.version?.status === 'processing') {
       if (!rootElement?.isConnected) break;
 
-      if (inViewport(rootElement))
-        this.version = await this.versionStore.getOne(props.prototype!.id);
+      if (inViewport(rootElement)) this.version = await this.versionStore.getOne(this.version.id);
 
       await sleep(3);
     }
@@ -91,34 +89,28 @@ export class PrototypeGenerator extends ObservedComponent<PrototypeGeneratorProp
     return (
       <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
         {previewLink && (
-          <Link
+          <Button
             href={previewLink}
             target="_blank"
             rel="noopener noreferrer"
-            sx={{
-              textDecoration: 'none',
-              fontSize: '0.875rem',
-              fontWeight: 500,
-              color: 'primary.main',
-            }}
+            variant="contained"
+            color="success"
+            size="small"
           >
             {t('view_preview')}
-          </Link>
+          </Button>
         )}
         {gitLogsLink && (
-          <Link
+          <Button
             href={gitLogsLink}
             target="_blank"
             rel="noopener noreferrer"
-            sx={{
-              textDecoration: 'none',
-              fontSize: '0.875rem',
-              fontWeight: 500,
-              color: 'text.secondary',
-            }}
+            variant="contained"
+            color="warning"
+            size="small"
           >
             {t('view_ai_log')}
-          </Link>
+          </Button>
         )}
       </Box>
     );

eslint.config.ts

@@ -47,7 +47,6 @@ export default tsEslint.config(
         warnOnUnsupportedTypeScriptVersion: false,
       },
     },
-    // @ts-expect-error https://github.com/vercel/next.js/issues/81695
     rules: {
       // spellchecker
       '@cspell/spellchecker': [

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference path="./.next/types/routes.d.ts" />
+import './.next/dev/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information.

package.json

@@ -34,7 +34,7 @@
     "mobx-react": "^9.2.1",
     "mobx-react-helper": "^0.5.1",
     "mobx-restful": "^2.1.4",
-    "next": "^15.5.6",
+    "next": "^16.0.0",
     "next-pwa": "~5.6.0",
     "next-ssr-middleware": "^1.0.3",
     "react": "^19.2.0",
@@ -50,7 +50,7 @@
     "@eslint/compat": "^1.4.0",
     "@eslint/js": "^9.38.0",
     "@idea2app/data-server": "^1.0.0-rc.3",
-    "@next/eslint-plugin-next": "^15.5.6",
+    "@next/eslint-plugin-next": "^16.0.0",
     "@stylistic/eslint-plugin": "^5.5.0",
     "@tailwindcss/postcss": "^4.1.15",
     "@tailwindcss/typography": "^0.5.19",
@@ -62,7 +62,7 @@
     "@types/node": "^22.18.12",
     "@types/react": "^19.2.2",
     "eslint": "^9.38.0",
-    "eslint-config-next": "^15.5.6",
+    "eslint-config-next": "^16.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-simple-import-sort": "^12.1.1",
@@ -109,12 +109,10 @@
     "e": "pnpx @dotenvx/dotenvx run -f .env.personal.local -- pnpm",
     "prepare": "husky || true",
     "install": "xgit download https://github.com/idea2app/key-vault main idea2app.github.io  ||  true",
-    "dev": "next dev",
-    "build": "next build",
-    "export": "next build  &&  next export",
+    "dev": "next dev --webpack",
+    "build": "next build --webpack",
     "start": "next start",
-    "lint": "next lint --fix  &&  git add .  &&  tsc --noEmit",
-    "test": "lint-staged  &&  npm run lint",
+    "test": "lint-staged  &&  tsc --noEmit",
     "pack-image": "docker build -t idea2app/web-server .",
     "container": "docker rm -f web-server  &&  docker run --name web-server -p 3000:3000 -d idea2app/web-server"
   }