본 포스팅은 공식문서를 기반으로 만들어 졌습니다.

Started

NextJS는 Node 14.6.0버전이상에서만 지원되니깐 먼저 참고하길 바랍니다.
MacOS, Window(including WSL), Linux 환경에서 지원됩니다.

Next 프로젝트 만들기

만약 처음부터 Next를 도입하기로 결정하셨다면 다음과 같은 작업을 따릅니다.

npx create-next-app@latest {directory/name}
# or
yarn create next-app  {directory/name}

📑 타입스크립트로 만들기

npx create-next-app@latest {directory/name} --typescript
# or
yarn create next-app  {directory/name} --typescript

설정이 완료 된 후 npm run dev 또는 yarn dev 개발서버를 실행하여 확인해주세요.

프로젝트에 Next 적용하기

이미 있는 프로젝트에 Next.js를 적용할려면 다음과 같은 작업이 필요합니다.

npm i next react react-dom
# or
yarn add next react react-dom

설치가 완료 되었다면 package.json을 열고 다음과 같이 추가해줍니다.

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

• dev : next dev 개발 모드로 앱을 실행하기 위한 명령
• build : next build 프로덕션 사용을 위한 앱 빌드 명령
• start : next start 프로덕션 서버를 실행하기 위한 명령
• lint : next lint NextJS 내장 ESLint구성을 설정하기 위한 명령

그 후 애플리케이션 디렉토리에 pages와 public폴더를 만들어 줍니다. (필수)

• pages : 파일 이름을 기반으로 경로와 연결 됌 ex) pages/home.tsx는 /home 경로에 매핑됌
• public : 이미지, 글꼴등 static resource등을 저장합니다.

pages 폴더에 루트로 접속 될 페이지인 index.tsx를 만든 후 다음과 같이 내용을 채워주세요.

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

export default HomePage

설정이 완료 된 후 npm run dev 또는 yarn dev 개발서버를 실행하여 확인해주세요.

왜 씁니까?

뭐 SSR지원 최적화, 빌드에서의 강력함 되게 많은데 가장 간단하고 강력한 장점은 디자인패턴과 자잘한 패키지는 세팅 되어 준비된 boilerplate이기 때문입니다.

나는 개인적으로 이 점 하나 덕분에 대형기업에서 많이 쓴다고 생각합니다.

SSR 지원

바닐라 리액트는 CSR기반이기에 많은 부분을 클라이언트(사용자)에게 부담합니다.
초기페이지 하나도 브라우저가 script를 거쳐서 가져오게 합니다.
사용자의 인터넷 속도가 빠르다면 큰 문제가 되지 않지만 인터넷이 느리다면 가져 올 때 까지
빈 화면만 바라봐야 되며 이는 사용자 경험을 크게 해하는 일입니다.

Next.js를 이용하면 동적인 부분(script)과 정적인 부분(UI) 구분하여 랜더링이 가능합니다.
간단한 기능 같지만 SEO에도 유리하고 사용자 경험도 크게 향상 할 수 있습니다.