fix next.config.js for global settings

packages/app/next.config.js

@@ -1,9 +1,46 @@
+import packageJSON from './package.json';
+
+// define transpiled packages for '@growi/*'
+const withTM = require('next-transpile-modules')([
+  '@growi/core',
+  '@growi/ui',
+]);
+
+// define additional entries
+const additionalWebpackEntries = {
+  boot: './src/client/boot',
+};
+
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   typescript: {
     tsconfigPath: 'tsconfig.build.client.json',
   },
+
+  webpack(config, options) {
+
+    // configure additional entries
+    const orgEntry = config.entry;
+    config.entry = () => {
+      return orgEntry().then((entry) => {
+        return { ...entry, ...additionalWebpackEntries };
+      });
+    };
+
+    // configure plugins
+    const WebpackAssetsManifest = require('webpack-assets-manifest');
+    config.plugins.push(
+      new WebpackAssetsManifest({
+        publicPath: true,
+        output: 'custom-manifest.json',
+      }),
+    );
+
+    return config;
+  },
+
 };
 
-module.exports = nextConfig;
+module.exports = withTM(nextConfig)

packages/app/package.json

@@ -127,6 +127,7 @@
     "multer": "~1.4.0",
     "multer-autoreap": "^1.0.3",
     "next": "^12.1.6",
+    "next-transpile-modules": "^9.0.0",
     "nocache": "^3.0.1",
     "nodemailer": "^6.6.2",
     "nodemailer-ses-transport": "~1.5.0",
@@ -142,10 +143,10 @@
     "passport-twitter": "^1.0.4",
     "prom-client": "^13.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
     "react-card-flip": "^1.0.10",
     "react-dnd": "^14.0.5",
     "react-dnd-html5-backend": "^14.1.0",
+    "react-dom": "^18.2.0",
     "react-image-crop": "^8.3.0",
     "react-multiline-clamp": "^2.0.0",
     "reconnecting-websocket": "^4.4.0",
@@ -177,8 +178,6 @@
     "@types/express": "^4.17.11",
     "@types/jquery": "^3.5.8",
     "@types/multer": "^1.4.5",
-    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.5",
     "autoprefixer": "^9.0.0",
     "bootstrap": "^4.5.0",
     "browser-sync": "^2.27.7",
@@ -218,7 +217,7 @@
     "markdown-it-task-checkbox": "^1.0.6",
     "markdown-it-toc-and-anchor-with-slugid": "^1.1.4",
     "markdown-table": "^1.1.1",
-    "mini-css-extract-plugin": "^0.9.0",
+    "mini-css-extract-plugin": "^2.6.1",
     "morgan": "^1.10.0",
     "node-dev": "^4.0.0",
     "normalize-path": "^3.0.0",
@@ -259,7 +258,7 @@
     "tsconfig-paths-webpack-plugin": "^3.5.1",
     "unstated": "^2.1.1",
     "webpack": "^4.46.0",
-    "webpack-assets-manifest": "^3.1.1",
+    "webpack-assets-manifest": "^5.1.0",
     "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^4.9.1"
   }

packages/app/src/pages/_app.tsx

@@ -1,8 +1,23 @@
-import '../styles-next/globals.css';
-import type { AppProps } from 'next/app';
+import { AppProps } from 'next/app';
 
-function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+// import { appWithTranslation } from '~/i18n';
+
+import '~/styles/style-app.scss';
+import '~/styles/theme/default.scss';
+// import InterceptorManager from '~/service/interceptor-manager';
+
+// import { useGrowiVersion } from '../stores/context';
+// import { useInterceptorManager } from '~/stores/interceptor';
+
+function GrowiApp({ Component, pageProps }: AppProps) {
+  // useInterceptorManager(new InterceptorManager());
+  // useGrowiVersion(pageProps.growiVersion);
+
+  return (
+    <Component {...pageProps} />
+  );
 }
 
-export default MyApp;
+// export default appWithTranslation(GrowiApp);
+
+export default GrowiApp

packages/app/src/pages/_document.tsx

@@ -0,0 +1,56 @@
+import Document, {
+  DocumentContext, DocumentInitialProps,
+  Html, Head, Main, NextScript,
+} from 'next/document';
+
+import fs from 'fs';
+import path from 'path';
+
+// import { renderScriptTagsByGroup, renderStyleTagsByGroup } from '~/service/cdn-resources-loader';
+import { resolveFromRoot } from '~/utils/project-dir-utils';
+
+interface GrowiDocumentProps {
+  bootJsPath: string;
+}
+declare type GrowiDocumentInitialProps = DocumentInitialProps & GrowiDocumentProps;
+
+async function importCustomManifest(): Promise<any> {
+  const customManifestStr: string = await fs.readFileSync(resolveFromRoot('.next/custom-manifest.json'), 'utf-8');
+  return JSON.parse(customManifestStr);
+}
+
+class GrowiDocument extends Document<GrowiDocumentProps> {
+
+  static async getInitialProps(ctx: DocumentContext): Promise<GrowiDocumentInitialProps> {
+    const initialProps: DocumentInitialProps = await Document.getInitialProps(ctx);
+
+    const customManifest: any = await importCustomManifest();
+    const bootJsPath = customManifest['boot.js'];
+
+    return { ...initialProps, bootJsPath };
+  }
+
+  render(): JSX.Element {
+
+    const { bootJsPath } = this.props;
+
+    return (
+      <Html>
+        <Head>
+          <script src={bootJsPath}></script>
+          {/*
+          {renderScriptTagsByGroup('basis')}
+          {renderStyleTagsByGroup('basis')}
+          */}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+
+}
+
+export default GrowiDocument;