드디어 Next.JS 를 활용하여, 프로젝트를 진행 해보기로 했다.

이번 프로젝트는 랜딩 페이지 개발이다.

GA(Google Analytics) 적용과, 앞으로 서비스를 Next.JS로 개발할 계획이 있기 때문에 실제 프로젝트 개발을 진행하면서 공부하고 적용해 나가기로 했다.

공식문서를 기반으로 next.js를 세팅해 보았다.
Next.JS 시작하기 공식문서

1. Set up(개발 환경 준비하기)

npx create-next-app project-name

React의 CRA가 있듯이 next에도 create-next-app이 존재한다.

npm 또는 yarn으로 직접 환경을 세팅할 수 있지만, 먼저는 개발을 진행하며 익혀가는 것이 중요하기 때문에 환경 세팅을 해주는 명령어를 사용했다.

(위의 명령어를 터미널에 입력)

터미널에 명령어를 입력하면 자동으로 파일구조 부터 환경까지 세팅해준다.

가장 상단의 .next 는 아마 없을 건데, next를 시작하면 생긴다.

npm run dev 를 입력하여 창을 열어보았다.

http://localhost:3000으로 들어가면, welcome 페이지 나오게 된다.

• git branch 가 main 으로 시작(?)
  각자의 상황에 맞추면 된다.
  현재 필자의 상황은 master branch로 모든 프로젝트가 진행되기 때문에 main을 master로 바꿔주려고 했다.

git branch -m main master
main 으로 시작 한 branch를 master로 바꿔주는 명령어다.

2 Typescript 적용하기

이제는 뺄 수 없는 typescript부터 적용해 보기로 했다.
먼저 tsconfig.json 파일을 생성해주자.

npm install --save-dev typescript @types/react @types/node

위의 명령어를 입력하여 Typescript를 설치한다.

tsconfig.json 파일에 다음과 같이 셋팅 되는 것을 볼 수 있다.

3. Styled-Components 설치

현재 프로젝트에서는 styled-component를 적용하고 있기 때문에, typescript가 인식 가능한 styled-component를 적용해 주어야 한다.

npm install --save @types/styled-components

위와 같이 package.json이 설치되는 것을 확인하면 된다.

4. styled-components 적용

styled-components를 설치하는 것이 곧 적용하는 것이라고 생각했는데, next.js에 styled-components를 적용하기 위해서는 또 다른 설정이 필요하다.

우선 아래는 next.js에서 공식적으로 styled-components를 적용한 예시 코드를 깃헙에 올려준 것이다.

공식 next.js with styled-components 코드 예시

우리가 지금까지 설정한 부분과 깃헙에 올려져 있는 설정을 비교해보면, 세가지가 다른것을 알 수있다.

이제 babelrc, _app.js 와 _document.js 를 설정해 주자.

5. babelrc 파일 생성 및 설정

babel에 대한 포스팅은 따로 올릴 예정이다.

간단하게 설명하자면, babel은 자바스크립트 컴파일러 이다.
최신 버전의 자바스크립트 문법을 브라우저가 이해할수 없기 때문에, babel이 브라우저가 이해할수 있도록 변환 시켜 준다.

styled-components의 경우 문자열 안에 css코드를 적게 되는데, 이 부분을 브라우저가 이해할 수 있도록 해주기 위해 babelrc파일을 생성해서 styled-components를 브라우저가 이해할 수 있도록 해주는 것이다.

npm install --save-dev babel-plugin-styled-components

npm으로 설치했으면 .babelrc 파일을 생성해서 아래와 같이 세팅 해주자.

6. global-style 과 theme

기본적으로 적용되는 css들을 reset 하고 자주 쓰는 css조합을 theme으로 등록해두면 편하게 css속성들을 적용해 나갈 수 있다.

global-style 파일에서는 reset.css 와 같은 역할을 할 수 있도록 셋팅하고, theme에서는 display:flex; align-items:center; 와 같이 자주 사용하는 css세트를 만들어 등록해주자.

• Home.module.css는 무시하고 globalstyle과 theme만 보면 된다.

이제 위에서 세팅해둔 css를 전역으로 사용할 수 있도록 세팅 해주자.

7. _app.js 세팅

위와 같이 설정해둔 global-style과 theme 를 전역으로 사용할 수 있도록 세팅해주자.

pages 폴더안에 _app.js파일에 세팅해주면 된다.

절대경로로 파일을 import하는 방법은 tsconfig.json 파일에서 "baseUrl" 부분을 설정해주면서 된다.

필자는 기본적으로 "./src" 부터 시작할 계획이기 때문에
"baseUrl": "./src", 으로 세팅 하였다.

8. _document.js 세팅

server side rendering을 할 때도, styled-components를 적용할 수 있도록 설정해주자.

SSR 에서 styled-components는 사용자가 접속하였을 때, 변환되기 때문에 깜빡이는 현상이 생기게 된다.

그래서 미리 css를 적용시켜두어야 깜빡이는 현상 없이 페이지를 실행할 수 있다.

이것을 _document.js 에 세팅 하는 것이다.