next.js란? (next.js 서버 커스터마이징)

100% csr인 cra(create-react-app)으로 개인 프로젝트를 진행하다, next를 알게되었습니다. 

 

cra로 개발중에 데이터 관리를 redux store로 진행했는데, front와 back의 데이터 관리가 완전히 분리되 많이 불편했습니다. (로그인 state 값 설정시 front와 back모두 데이터를 가져야 한는 경우) 그래서 react 생태계에서 ssr 방식을 찾았고 next.js를 알게 되었습니다.

 

docs에 적혀있는 공식적인 이용 방식은 'npx create-next-app' 을 이용해 next frame을 다운받고,  package.json의 next용 script(build, start)를 이용해 개발하고 배포합니다.

"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

 

헌데, 대규모 프로젝트가 아닌 제 프로젝트에서 tcp통신및 db connect를 위해 또다른 api 서버를 만들기보단, next서버를 커스터마이징할 필요가 있다 생각했습니다. 그래서 오늘은 next.js 서버를 커스터마이징해보도록 하겠습니다.

(보편적인 방식은 next.js 공식문서를 참조해주세요. https://nextjs.org/docs/getting-started)

 

 

 

1. 먼저 npm install next express --save를 통해 next와 express 모듈을 설치해줍니다.

2. server.js폴더를 아래 사직과 같이 가장 상위 위치에 위치시켜줍니다.

3. server.js를 아래와 같이 작성합니다.

const express = require("express");
const next = require('next')



const dev = true  //false => product, true => dev
const app = next({ dev })
const handle = app.getRequestHandler()



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

	//필수항목!, pages폴더 아래 component들 pre- render
    server.get('*', (req, res) => {
      return handle(req, res)
    })



    server.listen(3000, err => {
        if (err) throw err
        console.log('> Ready on http://localhost:3000')
    })



  
  })

 

4. 여기서 dev값이 true일때는 dev, false일때는 배포모드이고, server.get("*", (req, res) => {return handle(req, res)})은 통해 pages폴더아래 component들을 모두 미리 rendering 해줍니다.

 

5. node server.js를 이용해 개발과 배포를 진행해주시면 됩니다. (dev값이 true일때 node server.js를 하면 개발자 모드로 진행됩니다.)

 

* 배포시에는 npm run build를 통해 한번 빌드해주고, dev를 true로 바꾼 상태에서 node server.js를 실행시켜주시면 됩니다.

 

 

 

요약:

@ npm run script대신 node server.js 명령어를 통해  node 서버를 실행시킨다.

@ server.get("*", (req, res) => {return handle(req, res)})으로 pages들을 미리 rendering 해준다.

@ 배포시에는 npm run build를 통해 한번 빌드해준다.

@ server.js파일 명은 임의로 지어도 되지만, 위치만큼은 가장 상위 directory에 위치시킨다.

 

끝!

 

 

 

위 코드가 보기 어려울 경우 이 링크를 참조해주세요.

https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/next-js%EB%9E%80-next-js-%EC%84%9C%EB%B2%84-%EC%BB%A4%EC%8A%A4%ED%84%B0%EB%A7%88%EC%9D%B4%EC%A7%95-b814392f9b80