Next.js 1. 왜 Next.js인가?

  오늘부터 Next.js를 학습하고자 한다. 최근 ai들의 비약적인 발전으로 인해, 앞으로 개발자들의 전망을 특정한 분야만 다루는 것이 아닌, 전체적으로 다룰 수 있는 개발자를 선호할 것으로 본다. 프론트엔드 개발자로서 이를 위한 최고의 접근 중 하나가 Next.js가 아닐까 싶다. 특히 요즘은 CSR보다는 SSR이나 SSG가 더 각광받고 있기 때문에 더더욱 이 Next.js는 이제 선택이 아닌 필수가 아닐까 싶다. 

  그래서 당분간은 Next.js 개념을 정리하고, Next.js를 사용한 간단한 프로젝트를 진행해보고자 한다. 개념과 Next.js 공식문서를 참조했다.

 

• 왜 Next.js인가?

  React로 완전한 웹 애플리케이션을 구축하려면 고려해야 할 중요한 세부 사항이 많다. 일단 코드는 webpack과 같은 번들러를 사용하여 번들링 돼야 한다. 그리고 Babel과 같은 컴파일러를 사용하여 변환도 해야 한다. virtual DOM을 사용하기 때문이다. 둘째로 성능 및 SEO(검색엔진최적화)를 위해 일부 페이지를 사전 렌더링 한다던지 서버 사이드 렌더링이나 클라이언트 사이드 렌더링을 사용할 것인지 고려해야 한다. 마지막으로 React 앱을 DB에 연결하기 위해 일부 서버 측 코드를 작성하기도 해야 한다.

  Next.js는 이런 문제들을 해결해 준다. 먼저, Next.js는 직관적인 페이지 기반 라우팅 시스템을 제공해 준다. 동적 경로를 지원해 주는 것이다. 둘째로 사전 렌더링이나 정적 생성(SSG) 또는 서버 사이드 렌더링(SSR)이 페이지 별로 사용가능하게 도와준다. 셋째로 더 빠른 페이지 로드를 위해 자동 코드 분할을 해준다. 넷째로 최적화된 사전 Fetch를 사용한 클라이언트 사이드 라우팅을 제공받을 수 있다. 그 외에도 내장 CSS 및 Sass나 CSS-in-JS를 사용, Fast Refresh를 지원하는 개발 환경, 서버리스 함수로 API 끝점을 구축하기 위한 API 경로 등이 있다. 

  

• 설치 및 기본 세팅

  Next.js를 세팅하기 위해서 먼저 Node.js가 설치되어 있어야 한다. Node.js는 14.6.0 이상의 버전이 필요하다. 그리고 create-next-app으로 자동으로 설정되는 Next.js 앱을 만들 수 있다. 디렉토리를 따로 생성할 필요는 없다. 나의 경우 typescript를 사용하기 때문에 --typescript 플래그를 사용한다. 이렇게 하면 단번에 next.js 프로젝트가 시작된다.

npx create-next-app@lastest --typescript

 

  수동으로 설치하는 것도 가능하다. next.js를 다운로드하고, 기본적으로 react와 react-dom도 같이 필요하다.

npm install next react react-dom

그리고 package.json의 script를 next.js 기준으로 바꿔준다.

"scripts": {
  "dev": "next dev",  // dev: next dev - 개발 모드에서 Next.js를 시작하기 위한 실행
  "build": "next build",  // build: next - build 프로덕션 사용을 위한 앱 빌드 실행
  "start": "next start",  // start: next start - Next.js 프로덕션 서버를 시작하기 위한 실행
  "lint": "next lint". // lint: next lint - Next.js의 내장 ESLint 구성을 설정하기 위한 실행
}

 

  다음으로 앱 루트 경로에 pages와 public이라는 두 개의 디렉토리를 만든다. pages는 파일 이름을 기반으로 url과 연결된다. 예를 들면 pages/about.js는 /about url로 매핑되는 것이다. public은 이미지, 글꼴 등과 같은 정적 소스를 저장한다. publick에 있는 파일은 /에서 시작하여 해당 디렉토리 내의 파일을 참조할 수 있다.

  Next.js는 페이지 개념을 기반으로 구축되었다. 이 페이지는 pages 디텍토리안에 있는 .js, .jsx 또는 .ts, .tsx로 부터 export된 React 컴포넌트이다. 그래서 파일이름으로 동적 경로 매개변수를 추가할 수도 있다. pages/index.js에 다음 내용으로 채운다.

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

export default HomePage;

이렇게 하고 npm run dev를 실행하면 http://localhost:3000에 해당하는 웹 서버가 실행된다.