[migrate] upgrade to Next.js 16, MobX-GitHub 0.6 & other latest Upstream packages (#10)

Author: TechQuery

README.md

@@ -111,9 +111,10 @@ pnpm container
 
 1. create & configure your own `CACHE_REPOSITORY` with https://github.com/idea2app/Web-file-cache
 2. set the `NEXT_PUBLIC_CACHE_HOST` environment variable to your CDN URL
-3. start your Lark-Next.js service, then copy the Crawler JWT from CLI console
-4. create an Automation Flow in your Lark BI Table to watch Attachment fields changing, then send an HTTP `POST` request to `https://your.next.js/api/file/crawler/task` with the Crawler JWT in the `Authorization` header
-5. your Lark file attachments will be cached in your CDN and loaded by your Lark-Next.js service automatically
+3. create an Automation Flow in your Lark BI Table to watch Attachment fields changing, then send an HTTP `POST` request to `https://api.github.com/repos/your-namespace/Web-file-cache/actions/workflows/crawler.yml/dispatches` with:
+   1. the [GitHub PAT][35] in the `Authorization` header
+   2. `https://your.next.js/api/Lark/file/attachment-id/file-name` as `url` body parameter
+4. your Lark file attachments will be cached in your CDN and loaded by your Lark-Next.js service automatically
 
 [0]: https://www.larksuite.com/
 [1]: https://react.dev/
@@ -150,3 +151,4 @@ pnpm container
 [32]: https://open.larksuite.com/document/server-docs/getting-started/api-access-token/app-access-token-development-guide#1f8b587c
 [33]: https://github.com/idea2app/Web-file-cache?tab=readme-ov-file
 [34]: https://nextjs.org/docs/deployment
+[35]: https://github.com/settings/tokens

eslint.config.ts

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

models/Translation.ts

@@ -1,12 +1,12 @@
 import {
   loadLanguageMapFrom,
-  parseCookie,
   TranslationMap,
   TranslationModel,
 } from 'mobx-i18n';
 import { DataObject } from 'mobx-restful';
 import { NextPageContext } from 'next';
 import { createContext } from 'react';
+import { parseCookie } from 'web-utility';
 
 import zhCN from '../translation/zh-CN';
 

models/configuration.ts

@@ -13,8 +13,7 @@ export const API_Host = isServer()
     : 'http://localhost:3000'
   : globalThis.location.origin;
 
-export const CACHE_HOST = process.env.NEXT_PUBLIC_CACHE_HOST!,
-  CrawlerEmail = `[email protected]`;
+export const CACHE_HOST = process.env.NEXT_PUBLIC_CACHE_HOST!;
 
 export const LARK_API_HOST = `${API_Host}/api/Lark/`;
 

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

@@ -8,7 +8,7 @@
   },
   "dependencies": {
     "@editorjs/code": "^2.9.3",
-    "@editorjs/editorjs": "^2.30.8",
+    "@editorjs/editorjs": "^2.31.0",
     "@editorjs/header": "^2.8.8",
     "@editorjs/image": "^2.10.3",
     "@editorjs/link": "^2.6.2",
@@ -17,82 +17,82 @@
     "@editorjs/quote": "^2.7.6",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "^15.5.2",
-    "@sentry/nextjs": "^10.9.0",
+    "@next/mdx": "^16.0.1",
+    "@sentry/nextjs": "^10.22.0",
     "copy-webpack-plugin": "^13.0.1",
-    "core-js": "^3.45.1",
+    "core-js": "^3.46.0",
     "editorjs-html": "^4.0.5",
     "file-type": "^21.0.0",
     "formidable": "^3.5.4",
     "idea-react": "^2.0.0-rc.13",
     "jsonwebtoken": "^9.0.2",
-    "koa": "^3.0.1",
+    "koa": "^3.1.1",
     "koa-jwt": "^4.0.4",
     "koajax": "^3.1.2",
-    "less": "^4.4.1",
+    "less": "^4.4.2",
     "less-loader": "^12.3.0",
     "lodash": "^4.17.21",
-    "marked": "^16.2.1",
-    "mime": "^4.0.7",
-    "mobx": "^6.13.7",
-    "mobx-github": "^0.4.0",
-    "mobx-i18n": "^0.7.1",
-    "mobx-lark": "^2.4.1",
-    "mobx-react": "^9.2.0",
+    "marked": "^16.4.1",
+    "mime": "^4.1.0",
+    "mobx": "^6.15.0",
+    "mobx-github": "^0.6.2",
+    "mobx-i18n": "^0.7.2",
+    "mobx-lark": "^2.5.0",
+    "mobx-react": "^9.2.1",
     "mobx-react-helper": "^0.5.1",
-    "mobx-restful": "^2.1.0",
-    "mobx-restful-table": "^2.5.3",
-    "next": "^15.5.2",
+    "mobx-restful": "^2.1.4",
+    "mobx-restful-table": "^2.5.5",
+    "next": "^16.0.1",
     "next-pwa": "~5.6.0",
     "next-ssr-middleware": "^1.0.3",
     "next-with-less": "^3.0.1",
     "prismjs": "^1.30.0",
-    "react": "^19.1.1",
+    "react": "^19.2.0",
     "react-bootstrap": "^2.10.10",
     "react-bootstrap-editor": "^2.1.1",
-    "react-dom": "^19.1.1",
+    "react-dom": "^19.2.0",
     "react-editor-js": "^2.1.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
     "remark-mdx-frontmatter": "^5.2.0",
-    "undici": "^7.15.0",
-    "web-utility": "^4.5.3",
-    "webpack": "^5.101.3",
+    "undici": "^7.16.0",
+    "web-utility": "^4.6.4",
+    "webpack": "^5.102.1",
     "yaml": "^2.8.1"
   },
   "devDependencies": {
     "@babel/plugin-proposal-decorators": "^7.28.0",
-    "@babel/plugin-transform-typescript": "^7.28.0",
-    "@babel/preset-react": "^7.27.1",
-    "@cspell/eslint-plugin": "^9.2.1",
-    "@eslint/compat": "^1.3.2",
+    "@babel/plugin-transform-typescript": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@cspell/eslint-plugin": "^9.2.2",
+    "@eslint/compat": "^1.4.1",
     "@eslint/eslintrc": "^3.3.1",
-    "@eslint/js": "^9.34.0",
-    "@next/eslint-plugin-next": "^15.5.2",
+    "@eslint/js": "^9.39.0",
+    "@next/eslint-plugin-next": "^16.0.1",
     "@softonus/prettier-plugin-duplicate-remover": "^1.1.2",
-    "@stylistic/eslint-plugin": "^5.3.1",
+    "@stylistic/eslint-plugin": "^5.5.0",
     "@types/eslint-config-prettier": "^6.11.3",
-    "@types/formidable": "^3.4.5",
+    "@types/formidable": "^3.4.6",
     "@types/jsonwebtoken": "^9.0.10",
-    "@types/koa": "^3.0.0",
-    "@types/koa__router": "^12.0.4",
+    "@types/koa": "^3.0.1",
+    "@types/koa__router": "^12.0.5",
     "@types/lodash": "^4.17.20",
     "@types/next-pwa": "^5.6.9",
-    "@types/node": "^22.18.0",
-    "@types/react": "^19.1.12",
-    "eslint": "^9.34.0",
-    "eslint-config-next": "^15.5.2",
+    "@types/node": "^22.18.13",
+    "@types/react": "^19.2.2",
+    "eslint": "^9.39.0",
+    "eslint-config-next": "^16.0.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-simple-import-sort": "^12.1.1",
-    "globals": "^16.3.0",
+    "globals": "^16.4.0",
     "husky": "^9.1.7",
-    "jiti": "^2.5.1",
-    "lint-staged": "^16.1.6",
+    "jiti": "^2.6.1",
+    "lint-staged": "^16.2.6",
     "prettier": "^3.6.2",
     "prettier-plugin-css-order": "^2.1.2",
-    "typescript": "~5.9.2",
-    "typescript-eslint": "^8.42.0"
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.46.2"
   },
   "resolutions": {
     "next": "$next"
@@ -120,11 +120,10 @@
   },
   "scripts": {
     "prepare": "husky",
-    "dev": "next dev",
-    "build": "next build",
+    "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/lark-next-bootstrap-ts:latest .",
     "container": "docker rm -f lark-next-bootstrap-ts  &&  docker run --name lark-next-bootstrap-ts -p 3000:3000 -d idea2app/lark-next-bootstrap-ts:latest"
   }

pages/api/core.ts

@@ -9,7 +9,7 @@ import { KoaOption, withKoa } from 'next-ssr-middleware';
 import { ProxyAgent, setGlobalDispatcher } from 'undici';
 import { parse } from 'yaml';
 
-import { CrawlerEmail, JWT_SECRET } from '../../models/configuration';
+import { JWT_SECRET } from '../../models/configuration';
 
 const { HTTP_PROXY } = process.env;
 
@@ -25,9 +25,6 @@ export const parseJWT = JWT({
   passthrough: true,
 });
 
-if (JWT_SECRET)
-  console.info('🔑 [Crawler JWT]', sign({ email: CrawlerEmail }, JWT_SECRET));
-
 export const safeAPI: Middleware<any, any> = async (context: Context, next) => {
   try {
     return await next();

pages/api/file/crawler/task.ts

@@ -30,7 +30,7 @@ const HomePage = observer(() => {
         </code>
       </p>
 
-      <Row className="g-4" xs={1} sm={2} md={4}>
+      <Row className="g-4" xs={1} md={2} lg={4}>
         {mainNav(i18n).map(({ link, title, summary }) => (
           <Col key={link}>
             <Card
@@ -52,7 +52,7 @@ const HomePage = observer(() => {
 
       <h2 className="my-4 text-center">{t('upstream_projects')}</h2>
 
-      <Row className="g-4" xs={1} sm={2} md={3}>
+      <Row className="g-4" xs={1} md={2} lg={3}>
         {framework.map(
           ({ title, languages, tags, summary, link, repository }) => (
             <Col key={title}>