[migrate] upgrade to Next.js 16

[fix] Status Check & Button Style of Prototype Generator component

Author: TechQuery

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"
   }