Node.js Express + NextJS + Typescript

Express + NextJS + Typescript 의 조합을 사용하는 이유는 무엇일까?..

 

개인적인 결론은 NextJS안에서 Request 와  Response 의 자유로운 설정이 아닐까 싶다 마치 스프링 부트 처럼

 

요즘은 대부분 Backend Frontend 가 구분되어 있어 하나의 프로젝트에서 개발하는 경우가 매우 드물지만.. 하나의 소스코드에서 Backend Frontend 를 개발해야 한다면 아래와 같이 설정하여 사용하면 된다. 

 

기본적으로 next app을 typescript 버전으로 생성한다

yarn create next-app --typescript

 

Express 를 설치한다

yarn add express
yarn add @types/express

 

서버 실행파일을 생성한다

inext.ts

import express, { Request, Response } 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 || 3005;

(async () => {
  try {
    await app.prepare();
    const server = express();
    server.all("*", (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);
  }
})();

 

tsconfig.server.json 파일을 생성하고 설정을 추가한다

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

 

마지막으로 실행 하는 부분의 스크립트를 수정한다

"scripts": {
    "dev": "ts-node --project tsconfig.server.json ./server/index.ts",
    "build": "next build",
    "start": "NODE_ENV=production ts-node --project tsconfig.server.json ./server/index.ts",
    "lint": "next lint"
  },

 

yarn dev 로 실행 한다. node env 를 이용하여 production 으로 해주면 서버 소스 코드에서 next app을 dev mode가 아닌 설정으로 실행한다.

 

출처의 경우 Typescript가 아닌 버전의 가이드 이다.

 

출처: https://levelup.gitconnected.com/set-up-next-js-with-a-custom-express-server-typescript-9096d819da1c