시작하기전에

회사에서 프로젝트 진행을 Next.js 와 Express를 연동해서 썻는데 매력있고 재밌어서 자주 사용할 것 같아 보일러 플레이트 코드로 만들어 보려 한다. (지속적으로 깃허브 README.md에 업데이트)
(github)next-express-boilerplate

개요

보일러 플레이트란?

컴퓨터 프로그래밍에서 보일러플레이트 또는 보일러플레이트 코드라고 부르는 것은 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다.

Custom Server 설정

1. Next.js 템플릿 생성

npx create-next-app

2. Express 설치

npm install express

3. 여러 의존성 패키지 설치

자주 사용하는 라이브러리 설치
(보기 편하게 한줄씩 작성)

npm install styled-components

npm install dotenv

npm install body-parser

npm install morgan

npm install connect-multiparty

npm install cookie-parser

npm install node-cron

npm install axios

4. server.js

프로젝트에 server.js 파일 생성 (이름은 무관)

require('dotenv').config();

const NODE_ENV = process.env.NODE_ENV;
const port = 3000;
const dev = NODE_ENV !== 'staging' && NODE_ENV !== 'production';

const nextJsEnabled = true;

const express = require('express');

const Next = require('next');
const nextJs = Next({dev});
const nextJsRequestHandler = nextJs.getRequestHandler();


(async () => {
    try {
        if (nextJsEnabled) await nextJs.prepare();
      
        const expressServer = express();
      
        expressServer.set('trust proxy', true);
        expressServer.use('/api', require('./serverSides/routes/api'));

        if (nextJsEnabled) expressServer.get('*', (req, res) => {
            return nextJsRequestHandler(req, res);
        });

        expressServer.listen(port, (err) => {
            if (err)
                throw err;

            console.info(`http://localhost:${port}`);
        });
    } catch (ex) {
        console.error(ex.stack);
        process.exit(1);
    }
})();

5. package.json 수정

"scripts": {
    "dev": "NODE_ENV=development node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },

6. next.config.js 작성 ?

공식문서에 보면 pages 폴더 아래에 next.config.js 파일을 만들고

module.exports = {
  useFileSystemPublicRoutes: false,
}

위와 같이 설정하라고 나와있는데 이는 내장 서버측 라우팅이 비활성화 된다는건데 디렉터리를 기반으로 등록된 Next.js 경로가 방해되지 않는한 해당 옵션은 필요 없다고 한다.

7. 실행

npm run dev로 실행해준 후 Front 에서 가상에 test API 를 호출하면

/api/test.js

const express = require('express');
const router = express.Router();

router.get('/', (req, res) => {
    console.log("test hello");
});

module.exports = router;

/pages/test.js

await axios.get('/api/test');

위와같이 정상적으로 호출하는 것을 볼 수 있다.