Next.js - React, Express.js 그리고 SSR을 한방에

Next.js 는  React + Express.js + React-Router-Dom + Server Side Rendering  모두 포함한 언어입니다. 

 

Express.js와 React-Router-Dom을 그대로 제공하는게 아니라 그런 기능성 개념을 내재화하고 있기 때문에 여러분이 이것 저것 설치하지 않고 쉽게 사용할 수 있다는 뜻입니다. 

 

이번 시간에는 Next.js의 본질적인 개념들을 빠르게 살펴 보겠습니다. 

 

Next.js 홈페이지의 Documentation 의 Getting Started를 보면 설치하는 방법이 나와 있습니다. 

 

npx create-next-app@latest .   현재디렉토리에 개발 환경 셋팅 command 

 

Next.js는 3가지 실행 명령이 있습니다. 

개발환경실행           npm run dev
배포 파일 생성         npm run build
서비스 시작              npm run start

 

개발환경으로 실행해 보겠습니다. 

 

localhost 포트는 3000으로 웹이 실행됩니다.   

 

이렇게 출력이 되면 성공적으로 개발환경이 셋팅이 된겁니다.  👏👏👏

 

이제 코딩을 시작해 보십니다.  main 처럼 코딩의 시작점으로 가 봅시다. 

pages 밑에 index.js 파일이 있습니다.  (타입스크립트를 사용하면 확장자는 .tsx 입니다.)

이 부분이 홈페이지에 대한 내용을 작성하시면 됩니다.  문법은 리액트에 맞게 작성하시면 됩니다. 

 

가장 먼저 시작하는 Hello을 출력하겠습니다. 

 

Hello을 찍었으니 배포하는 부분을 해 보겠습니다. 

npm run build

 

.next 폴더에 배포를 위한 빌드 파일이 만들어집니다. 

 

그다음,  실서버를 실행할때는  아래와 같이 하시면 됩니다.  next.js는 서버까지 내장되어 있는 올인원 솔루션입니다. 

npm run start

 

build, 실서버 실행까지 알아 보았으니,  다시 dev모드로 작업을 진행하겠습니다. 

 

 

Route

우리가 항상 신경써야 되는 부분이 Route 입니다.  url에 따라서 ui를 어떻게 응답할것인가 결정하는 행위입니다. 

사용자가 들어오는 경로                  파일 위치

http://a.com/                            /pages/index.js
http://a.com/sub/                    /pages/sub/index.js
http://a.com/sub/1                   /pages/sub/[id].js
http://a.com/sub/2                   /pages/sub/[id].js

sub/1, sub/2처럼 동적인 정보 일 경우는 [id].js 으로 주입됩니다.   

 

 

이제 서버쪽 코드는 어떻게 구현하는지 알아봅시다. 

API Route

서버의 API를 구현하고 싶으면 디렉토리가 중요한데요.   /pages/api 디렉토리에 서버 코드를 작성하시면 됩니다. 

http://a.com/api           /pages/api/index.js
http://a.com/api/1        /pages/api/[id].js
http://a.com/api/2        /pages/api/[id].js

 

pages/api/hello.js는 기본적인 코드를 제공합니다. 살펴보겠습니다. 

export default function handler( req, res) {
    res.status(200).json({ name: 'John Doe' })
}

여기 코드는 Express.js 와 같은 Back-end 기술의 일반적인 패턴에 따라서 코드를 작성하시며 클라이언트쪽에 응답이 됩니다.  이때 status 200은 응답에 성공했다는 코드값입니다.  전송할 데이터는 json() 안에 넣어 주시면 됩니다 

 

 

/api/hello를  실행해 보겠습니다. 

 

 

pages/api/[id].js를 구현해 보겠습니다.  id 받은 값을 리턴하는 부분도 코드에 넣겠습니다. 

export default function handler(req, res) {
   res.status(200).json({ id: req.query.id })  
}

 

 

Reference

https://www.youtube.com/watch?v=ECMB4kUCKWQ&t=10s