【问题标题】：NextJs custom Express Server not working properlyNextJs 自定义 Express 服务器无法正常工作
【发布时间】：2021-05-13 22:24:09
【问题描述】：

我最近决定迁移到 NextJs，但这样做时遇到了一些问题。我编写了一个 ExpressJs API，现在我想将它用作自定义 NextJs 服务器，正如文档中所说，但我无法使其工作

这是我的 server.ts 文件（我正在使用 Typescript）

///<reference path="../@types/index.d.ts"/>

import express from "express";
import next from "next";

// Rest of the imports (I removed to make the code shorter here)

import api from "./api";

const dev = process.env.NODE_ENV !== "production";

const app = next({ dev });
const handle = app.getRequestHandler();

const port = process.env.PORT || 3000;

require("dotenv").config();

app
  .prepare()
  .then(() => {
    const server = express();

    // All these following middlewares are imported previously
    server.use(logger("dev"));
    server.use(cors());
    server.use(compression());
    server.use(express.json());
    server.use(express.urlencoded({ extended: false }));
    server.use(cookieParser());
    server.use(NoCache);

    server.use("/api", auth.userHeader(), API); // My routes

    server.get("*", (req, res, next) => handle(req, res)); // NextJs Handle

    server.use(ErrorHandler);

    server.listen(port, () => {
      console.log(`Server Listening to port ${port}`);
    });
  })
  .catch((ex) => {
    console.error(ex.stack);
    process.exit(1);
  });

export default app;

Here's my folder structure

我做了一个非常简单的应用来测试它（只有一个登录页面的链接）

当我使用next 运行项目时，我的应用程序[按预期工作并且应用了样式][2]，但显然 ExpressJs API 没有。但是，当我运行 server.ts 文件时，API 按预期工作（所有端点都正常工作）并且我收到 next 的 compiled successfully 消息，但是 [页面变为空白][3] 给了由 next 应用的 style自动并且没有 CSS 加载到应用程序中（我在globals.scss 上的body 标记中添加了一个样式，以将其显示设置为block !important，因此它会覆盖使页面不显示的样式）。

这是我的 _app.tsx 文件

import { AuthProvider } from "../context/auth";

import "../styles/globals.scss";

function MyApp({ Component, pageProps }) {
  return (
    <AuthProvider>
      <Component {...pageProps} />
    </AuthProvider>
  );
}

export default MyApp;

你可以看到我在顶部导入了globals.scss

这是我的 _document.tsx 文件

import Document, { Html, Head, Main, NextScript } from "next/document";

class NextDocument extends Document {
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default NextDocument;

这是我的 next.config.js 文件

module.exports = {
  publicRuntimeConfig: {
    // Will be available on both server and client
    API_URL: process.env.API_URL,
  },
};

我有什么遗漏吗？我按照文档和观看的一些视频进行操作，但仍然没有进展

提前致谢。如果您需要任何其他信息，请告诉我。

更新

经过几次测试，我意识到当我删除 typescript 时，一切正常。我仍然不知道如何解决它，我不想失去打字稿的所有好处

我的 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "CommonJS",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/a.js", "pages/b.js", "pages/index.js", "server.js"],
  "exclude": ["node_modules"]
}

【问题讨论】：

标签： express next.js

【解决方案1】：

经过更多测试并意识到打字稿是问题所在，我将tsconfig.json 上的目标从ES5 更改为ES6，现在一切正常。

【讨论】：

太棒了！谢谢
很好，这也帮助解决了我的问题 :)