NextJS

so ez·2022년 5월 5일

NextJS란?

React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크.
리액트는 SPA(Single Page Application)을 이용하여 CSR(Client Side Rendering)을 하기 때문에 좋은점도 있지만 단점도 존재하는데 그 부분이 바로 검색엔진 최적화(SEO) 이다.
CSR를 하면 첫 페이지에서 빈 html을 가져온 후 JS 파일을 해석하여 화면을 구성하기 때문에 포털 검색에 거의 노출 될 일이 없다.
하지만 Next.js에서는 Pre-Rendering을 통해서 페이지를 미리 렌더링하여 완성된 HTML을 가져오기 때문에 사용자와 검색 엔진 크롤러에게 바로 렌더링 된 페이지를 전달할 수 있게 된다.
리액트에서도 SSR을 지원하지만 구현하기 굉장히 복잡하기때문에 Next.js를 통해서 이 문제를 해결하면 된다.

설치방법

npx create-next-app@latest
//또는
yarn create next-app
//typescript를 사용할 경우 맨 뒤에 --typescript 붙여주기

기본구조

public

이미지같은 정적(static) 에셋들을 보관

styles

스타일링을 처리해주는 폴더
모듈(module) css는 컴포넌트 종속적으로 스타일링하기 위한 것이며, 확장자 앞에 moodule을 붙여줘야 함.

next.config.js

NextJs는 웹팩을 기본 번들러로 사용
웹팩에 관한 설정을 이 파일에서 진행

그 외 특징

Pre-rendering

NexsJs는 모든 페이지를 pre-render 한다.
모든 페이지를 위한 HTML을 Client 사이드에서 자바스크립트로 처리하기 전, 사전에 생성한다는 의미이다.
이렇게 하기 때문에 SEO 검색엔진 최적화가 좋아지는 것이다.

Pre-render 테스트

자바스크립트 Disable
Chrome tool 설정
툴을 사용하여 React 사이트와 NextJs 사이트 비교하기
보통 React 사이트 VS NextJs 사이트

Data Fetching

NextJS에서 데이터를 가져오는 방법은 여러가지가 있는데,
애플리케이션의 사용 용도에 따라 다른 방법을 사용해주면 된다.

보통 리액트에서 데이터를 가져올 때 useEffect 안에서 가져온다.
하지만 NextJs에서는 아래와 같은 방법을 사용한다

getStaticProps

Static Generation으로 빌드(build)할 때 데이터를 불러옴.
(미리 만들어줌)

function Blog({posts}) {
	return (
    	<ul>
      		{posts.map((post) => (
            	<li>{post.title}</li>
            ))} 
      	</ul>
    )
}

export async function getStaticProps(){
	const res = await fetch('http://.../posts')
    const posts = await res.json()
  
	return {
    	props: {
        	posts,
        },
    }
}

getStaticProps 함수를 async로 export하면,
getStaticProps에서 리턴되는 props를 가지고 페이지를 pre-render 한다.
build time에 페이지를 렌더링한다.

사용할 때

페이지를 렌더링하는데 필요한 데이터를 사용자 요청보다 먼저 build 시간에 가져올 때
Headless CMS에서 데이터를 가져올 때
데이터를 사용자별이 아닌 공개적으로 캐시할 수 있을 때
페이지는 미리 랜더링되어야 하고(SEO) 매우 빨라야 할 때.
(getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성한다.)

getStaticPaths

Static Generation으로 데이터에 기반하여 pre-render 시 특정한 동적 라우팅 구현
(pages/post/[id].js)

동적 라우팅이 필요할 때 getStaticPaths로 경로 리스트를 정의하고, build 시간에 HTML에 랜더 됨.
NextJs는 정적으로 getStaticPaths에서 호출하는 경로들을 가져옴.

paths

어떠한 경로가 pre-render 될 지 결정
만약 pages/posts/[id].js 라는 이름의 동적 라우팅을 사용하는 페이지가 있다면 아래와 같이 됨

return{
	paths: [
      { params: {id: '1'} },
      { params: {id: '2'} },
    ],
  	fallback: ...
}

build하는동안 /posts/1과 /posts/2가 생성됨

params

페이지 이름이 pages/posts/[postId]/[commentId] 라면,
params는 postId와 commentId다
만약 page 이름이 pages/[...slug]와 같이 모든 경로를 사용한다면,
params는 slug가 담긴 배열이어야 한다.
['postId', 'commentId']

fallback

flase 라면 getStaticPaths로 리턴되지 않는 것은 모두 404 페이지가 뜬다.
true 라면 getStaticPaths로 리턴되지 않는 것은 404가 아닌 fallback 페이지가 뜬다.

if(router.isFallback){
	return <div>Loading...</div>
}

getStaticPaths 예시

function Post({post}){
	//Render post
}

export async function getStaticPaths(){
	const res = await fetch('https://.../posts')
    const posts = await res.json()
    
    const paths = post.map((post) => ({
    	params: { id: post.id }
    }))
    
    return { paths, fallback: false }
}

export async function getStaticProps({params}){
  const res = await fetch(`http://.../posts/${params.id}`)
  const post = await res.json()
  
  return { props: {post} } 
}