npx create-next-app

// Native
const { join } = require("path");
const { format } = require("url");

// Packages
const { BrowserWindow, app, ipcMain } = require("electron");
const isDev = require("electron-is-dev");
const prepareNext = require("electron-next");

// Prepare the renderer once the app is ready
app.on("ready", async () => {
  await prepareNext("./");

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: false,
      preload: join(__dirname, "preload.js"),
    },
  });

  const url = isDev
    ? "http://localhost:8000"
    : format({
        pathname: join(__dirname, "../out/index.html"),
        protocol: "file:",
        slashes: true,
      });

  mainWindow.loadURL(url);
});

// Quit the app once all windows are closed
app.on("window-all-closed", app.quit);

// listen the channel `message` and resend the received message to the renderer process
ipcMain.on("message", (event, message) => {
  event.sender.send("message", message);
});

const { ipcRenderer, contextBridge } = require("electron");

contextBridge.exposeInMainWorld("electron", {
  message: {
    send: (payload) => ipcRenderer.send("message", payload),
    on: (handler) => ipcRenderer.on("message", handler),
    off: (handler) => ipcRenderer.off("message", handler),
  },
});

{
  "root":true,
  "extends": ["next/core-web-vitals", "prettier"]
}

npx create-next-app@latest --typescript

npm i -D @typescript-eslint/eslint-plugin prettier eslint-config-prettier

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true, // Tell VSCode to format files on save
  "editor.defaultFormatter": "esbenp.prettier-vscode" // Tell VSCode to use Prettier as default file formatter
}

// .eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-explicit-any": "error"
  }
}

// .prettierrc.json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "printWidth": 100
}

// before
└─/
    ├─pages
    └─styles

// after
└─/
 └─src
    ├─pages
    └─styles

npm i -D tsc-watch

// .package.json
"scripts": {
  "dev": "next dev",
  "dev:ts": "tsc-watch --onSuccess \"npm run dev\"",
 ...
},

// .tsconfig.js
"compilerOptions": {
    "baseUrl": ".", /* 절대경로 모듈이 아닌, 모듈이 위치한 기준 디렉토리 */
    "paths": { /* baseUrl 기준으로 불러올 모듈의 위치를 재지정하는 엔트리 */
      "@/*": [
        "src/*"
      ]
    },
  ...
 }

npm i -D @next/bundle-analyzer cross-env rimraf

// .next.config.js
const {
  PHASE_DEVELOPMENT_SERVER,
  PHASE_PRODUCTION_BUILD,
  PHASE_PRODUCTION_SERVER,
  // eslint-disable-next-line @typescript-eslint/no-var-requires
} = require('next/constants');

// eslint-disable-next-line @typescript-eslint/no-var-requires
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = (phase, { defaultConfig }) => {
  const isDevLocal = phase === PHASE_DEVELOPMENT_SERVER; // `npm run dev`
  const isDevServer =
    !process.env.PROD && (phase === PHASE_PRODUCTION_BUILD || phase === PHASE_PRODUCTION_SERVER); // `npm run build`
  const isProdServer =
    process.env.PROD && (phase === PHASE_PRODUCTION_BUILD || phase === PHASE_PRODUCTION_SERVER); // `npm run build:prod`

  console.log(
    `isDevLocal:${isDevLocal}  isDevServer:${isDevServer}   isProdServer:${isProdServer}`
  );

  const currentEnv = () => {
    if (isDevLocal) return 'DevLocal';
    if (isDevServer) return 'DevServer';
    if (isProdServer) return 'ProdServer';
  };

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    env: {
      currentEnv: currentEnv(),
    },
  };

  const plugins = [withBundleAnalyzer];
  const config = plugins.reduce((acc, next) => next(acc), {
    ...nextConfig,
  });
  return config;
};

// .package.json
...
 "scripts": {
  ...
    "build-stats": "cross-env ANALYZE=true npm run build",
    "clean": "rimraf .next out"
  ...
  },

npm i -D @typescript-eslint/eslint-plugin prettier eslint-config-prettier tsc-watch @next/bundle-analyzer cross-env rimraf

// error message
> aipartner@0.1.0 lint
> next lint

Failed to load config "next/core-web-vitals" to extend from.
Referenced from: C:\work\aipartner\.eslintrc.json