(React) NextJS

목차
1. Next.js 란?
 - SSR ↔ CSR 이란
2. Nex.js의 주요 기능
3. 기본 설정 및 실행 결과

 

Next.js 란?

• React를 기반으로 기존의 CSR(Client Side Rendering)아 아닌 SSR(Server Side Rendering)을 간편하게 사용할 수 있게 해주는 프레임 워크
  
  • SSR이란? (Server Side Rendering) ↔ CSR (Client Side Rendering)
    • 웹 애플리케이션 랜더링 방식으로 사용자가 웹페이지에 접근할 때, 요청받은 서버는 완전하게 만들어진 HTML(CSS가 적용된)과 JS코드를 브라우저에게 응답해준다
    • 이후 브라우저는 HTML을 띄워줌에 이어서 JS코드를 다운하고 실행한다.
    • 이에 CSR보다 빠른 초기 로딩이라는 장점이 있다. 화면을 랜더 하기 위한 필수적인 요소를 먼저 가져오기 때문이다.
  • CSR 이란? (Client Side Rendering)
    • 마찬가지로 웹 애플리케이션 랜더링 방식이며 사용자가 웹페이지에 접근하면 빈 HTML문서에 데이터가 채워지는 형식이라고 보면 된다
    • 모든 HTML, CSS 그리고 JS파일 전부다 로드가 돼야만 페이지의 랜더링이 완료가 된다
    • SSR가 다르게 초기 로딩이 느릴 수는 있지만, 모든 데이터들을 불러옴에 있어서 빠른 페이지 이동이 가능하다
     

CSR / SSR

Next.js를 사용하는 이유

• 크게 2가지를 볼 수 있다
  • Initial Loading : 위에 언급한 거처럼 CSR 방식과 다르게 서버에서 JS를 로딩함에 있어서 클라이언트 쪽에서 그 부담이 적게 받아서 시간이 줄어들게 된다.
  • SEO (Search Engine Optimization) : 사용자의 검색의도를 명확히 이해하여 고객니즈 기반으로 웹사이트의 기능을 개선, 콘텐츠를 제작하는 방법. 웹사이트의 검색 엔진 결과 페이지에서 높은 순위를 차지하도록 웹사이트를 최적화하는 프로세스.
    • 이미 콘텐츠가 구성이 되어 있는 HTML로 랜더링이 이루어지는 SSR 덕분에 검색엔진에서 파악하기 쉬워지고 이에 검색결과에 더 높은 순위를 차지할 수 있게 도와준다
    • 이를 이용하려면  테크니컬 SEO 요소 중 중요한 검색엔진 제목, Meta Tag를 활용해서 기능을 제공
      • Meta Tag : 웹페이지가 담고 있는 컨텐츠가 아닌 그 자체의 정보를 명시하기 위해 사용하는 HTML 태그
        즉, 사용자들이 접근해서 보게 되는 웹 페이지 정보에 영향을 주지 않으면서 검색 엔진에 그 태그 내용들이 어떻게 표시할지, 검색될지 결정하는 중요한 요소 중 하나로 사용된다
      • 제목(Title) : 대표적으로 웹페이지의 제목을 나타내는 title 요소, 너무 길거나 가독성이 떨어지지 않는 선에서 사용한다면 브라우저를 한눈에 사용자들에게 흥미를 느끼게 할 수 있는 요소로 사용할 수 있다

 

기본설정으로 Nextjs 적용

 

Netjs를 사용하기 앞서 nodejs가 설치가 되어 있어야 한다

 

https://nodejs.org/ko/download

다운로드 | Node.js

이후 사용하고자 하는 디렉터리로 넘어가서 React와 비슷한 방법으로 설치를 한다면

 

# npm
npx create-next-app next

# yarn
yarn create next-app next

app 뒤에는 입력한 이름으로 해당 디렉터리를 nextjs 환경으로 생성해 준다

 

nextjs 생성 test를 위해 캡처

• Would you like to use TypeScript with this project? 
  • TypeScript와 함께 사용할지 말지 선택할 수 있는데, 저는 Yes를 선택하였습니다
• Would you like to use ESLint with this project? 
  • 자바스크립트(타입스크립트) 문법에서 에러를 표시해 주는 도구, 이에 저는 이 옵션도 Yes!
• Would you like to use Tailwind with this project? 
  • Utility-First를 지향하는 CSS 프레임워크인 Tailwind CSS를 사용여부를 물어보는 것이다
    • Utility-First는 미리 세팅된 유틸리티 클래스를 활용하여 HTML 코드 내에서 스타일링하는 것,
  • 처음에는 ㅋㅋㅋ 모르고 Yes 냅다 선택했는데..
    나중에 글을 정리하는 과정에서 깨달아 버렸다... 나중에는 이걸로 좀 편하게 CSS효과를 적용할 수 있을 듯하다
• Would you like to use 'src/' directory with this project? 
  • src 폴더 하위로 관리할지 그냥 Root에서 관리할지, 저는 src 하위로 관리하는 게 편해서 Yes!!
• Use App Router (recommended)?
  
  • 애플리케이션 Router를 사용할지 말지 (권장) , 저는 단순 정적페이지 구현 하려고 하기에 No!
• Would you like to customize the default import alias?
  • import 구문 커스터마이징 할 건지, 뭔지 몰라서 Yes 했었는데 경로 관련된 설정.
• What import alias would you like configured?
  
  • 사용자 지정할 경로의 이름? 별칭을 설정
  • import 할 때 Base 경로 설정

 

위처럼 옵션들을 선택하면 다음과 같은 화면으로 next 디렉터리 내 경로 Tree를 확인할 수 있다

 

경로 Tree 캡처

 

# next 디렉토리로 이동
cd next

# 개발 환경으로 Nextjs 실행
yarn dev

yarn dev 후 정상 실행

 

vscode에서 위처럼 결과가 나오면 브라우저를 실행하여 localhost:3000으로 접속할 수 있다

 

localhost:3000