将 Express 中间件添加到 Next JS 打字稿后网站未呈现答案

【问题标题】：Website not being rendered after adding Express Middleware to NextJS typrescript将 Express 中间件添加到 Next JS 打字稿后网站未呈现
【发布时间】：2021-06-28 07:28:27
【问题描述】：

页面未呈现。我在我的项目中使用 NextJS 和 Typescript。在我添加 ExpressJS 打字稿作为中间件之前，该项目运行良好。 React Devtools 不会将其注册为 React。在使用检查元素时，页面的内容似乎在那里，但是缺少 css。如果我跑

yarn next dev

它正常工作，但服务器文件不起作用。

文件夹结构

|_.next
|_node_modules
|_components
|           |_FirstComponent
|                          |_index.tsx
|                          |_FirstComponent.module.css
|_pages
|      |_ _app.tsx
|      |_ index.tsx
|      |_ _error.tsx
|
|_styles
|      |_ global.css
|
|_server
|      |_ index.ts
|
|_package.json
|_tsconfig.json
|_tsconfig.server.json

Package.json

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "ts-node --project tsconfig.server.json server/index.ts",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "express": "^4.17.1",
    "next": "10.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/express": "^4.17.11",
    "@types/node": "^14.14.37",
    "@types/react": "^17.0.3",
    "ts-node": "^9.1.1",
    "typescript": "^4.2.3"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/layouts/*": ["layouts/*"],
      "@/models/*": ["store/models/*"],
      "@/store/*": ["store/*"],
      "@/styles/*": ["styles/*"]
    }
  },

  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

tsconfig.server.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "module": "commonjs",
    "outDir": "dist",
    "noEmit": false
  },
  "include": ["server"]
}

服务器/index.ts

import express, { Response, Request } from "express";
import next from "next";

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });

const handle = app.getRequestHandler();
const port = process.env.PORT || 3000;

(async () => {
  try {
    await app.prepare();
    const server = express();

    server.get("*", (req: Request, res: Response) => {
      return handle(req, res);
    });

    server.listen(port, (err?: any) => {
      if (err) throw err;
      console.log(`> Ready on localhost:${port} - env ${process.env.NODE_ENV}`);
    });
  } catch (e) {
    console.error(e);
    process.exit(1);
  }
})();

【问题讨论】：

标签： javascript node.js typescript express next.js

【解决方案1】：

所以我想出了问题所在。在编译器选项下的 tsconfig.json 中，目标应设置为 es6。这将解决网站不呈现的问题。

"compilerOptions": {
    "target": "es6",
}

【讨论】：