[Next.js] Next.js 공식문서 파헤치기(1) - 시작하기

 

 

 

 

  Next.js 공식문서 파헤치기(1) - Next.js 시작하기

 

  이번에 맡게된 프로젝트를 진행하며 React를 사용하여 SEO와 SSR을 고려해야하는 상황이 생겼습니다. 흔히 사용하는 CRA를 통해 SPA 형태로 개발하더라도 추가적인 기능이나 설정을 통해 고려사항을 충족할 수도 있었지만 기술 도입 리서치를 통해 Next.js 사용하는 것이 옳다고 판단되어 스터디하게 되었습니다. 확실히 SPA에서 부족했거나 더 개선된 사항들이 많이 보이더군요. 저는 단순히 해석하고 글을 덧붙이는 작업이지만 시리즈로 아티클을 작성하여 함께 공부한다는 느낌으로 공유하고 싶습니다😎

 

  이 아티클은 Next.js Tutorial 문서를 기반으로 해석되어 작성되었습니다. 오역이 있을 수 있으며 제가 해석하며 가미한 내용이 포함될 수 있으니 부정확한 내용은 댓글로 달아주시면 감사하겠습니다!

 

 

  CRA을 통한 React Web Application을 빌드하기 위해서는 고려사항과 해결해야 하는 사항이 매우 많습니다.

• Webpack과 같은 bundler, Babel과 같은 compiler를 사용하여 번들링(Bundling)하는 과정이 필요한데?
• Code Splitting과 같은 Production Optimaization(제품 최적화)이 필요한데?
• 성능이 고려된 정적 사전 렌더링(pre-render)된 페이지, SEO는 사용할 수 있을까?
• Server-side Rendering 방식이 필요할지도?

 

 

  Next.js는 위와 같은 문제들을 해결 해줍니다. 이 Framework를 사용하게되면 사용성을 높일 수 있으며 이것을 사용하게 된다면 놀라운 경험을 할 수 있을 것이라고 말 합니다. 또한 Next.js 측에서는 이를 최고의 "Developer Experience"라고 합니다.

 

 

 

 

 

 

  Next.js: The React Framework

  Next.js는 React Framework입니다. 아래와 같은 best-in-class experience와 다양한 built-in feature 등을 목표로 합니다.

 

1. 직관적인 페이지 기반(page-based) routing system을 통해 Dynamic route를 가능합니다.
2. Static Generation(SSG)와 Server-side Rendering(SSR)과 같은 Pre-rendering은 각 페이지에서 지원됩니다.
3. 더 빠른 페이지(page) 로드를 위해 자동적인 code-splitting이 적용됩니다.
4. 최적화된 prefetching을 위한 Client-side routing이 가능합니다.
5. Built-in CSS와 SASS를 지원하며 이것 외에도 CSS-in-JS 라이브러리(Styled Component, Emotion, ...) 사용이 가능합니다.
6. Fast Refresh가 지원되는 개발환경을 제공합니다.
7. Serverless Functions와 함께 API endpoint를 빌드하기 위한 API route가 제공됩니다.
8. 충분한 확장성(fully extension)을 가집니다.

 

  현재 전세계의 손꼽히는 브랜드들 뿐만 아니라 수 많은 기업에서 프로덕션에 적용하여 사용 중입니다.(아래 링크에서 확인가능합니다.)

https://nextjs.org/showcase

Showcase | Next.js

 

 

 

 

 

  Next.js 프로젝트 생성하기

먼저, Next.js 프로젝트를 생성해봅시다.

# (방법 1) 자동 설정
$ npm create-next-app <project-name>

# (방법 2) 수동 설정
$ npm install next react react-dom
# or
$ yarn add next react react-dom

# 수동 설정을 하게 되면 package.json 파일 생성과 module을 설치해줍니다.(아래 참조)

 

* 수동설정 시 추가 설정

(1) /package.json 생성

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

 

(2) module 추가

$ npm install

# or

$ yarn

 

 

  프로젝트가 생성되었다면 개발 모드(development mode)로 실행해봅니다.

$ cd ./<project-name>

$ npm run dev 
# or
$ yarn dev

  terminal에서 프로젝트가 잘 실행되었다면 http://localhost:3000 을 통해 앱이 실행되는 것을 확인할 수 있습니다.

 

 

  Next.js는 page 단위 콘셉으로 빌드됩니다. 하나의 페이지는 pages 디렉토리에서 .js, .jsx, .ts, .tsx로 부터 추출(export)된 React Component 입니다. 또한 페이지는 /pages 아래의 파일명과 일치되어 라우팅(routing)됩니다. 예를 들어 page/about.js는 /about으로 매핑(mapping)되며 이 방식을 이용하여 파일 이름으로 Dynamic Route parameter을 추가하여 컨트롤하는 것이 가능합니다.

 

 

 

 

 

  Dynamic Routing 페이지

  Next.js는 동적 라우팅을 지원합니다. 예를 들어, 만약 pages/posts/[id].js 파일을 생성한다면 posts/1, posts/2와 같은 형태로 라우팅을 할 수 있습니다.

 

 

 

 

 

다음 아티클 이어가기 ⇒
Next.js 공식 문서 파헤치기(2) - Pages, SSG, SSR?

https://xtring-dev.tistory.com/entry/Nextjs-Nextjs-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B02-Nextjs%EC%9D%98-%EA%B8%B0%EB%B3%B8%EC%A0%81%EC%9D%B8-%ED%8A%B9%EC%A7%95

[Next.js] Next.js 공식문서 파헤치기(2) - Next.js 기본개념 "Pages, pre-render(SSG/SSR)"

 

 

 

  Ref.

https://nextjs.org/docs/getting-started

Getting Started | Next.js