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 붙여주기

기본구조

Pages

• 이 폴더 안에 페이지 생성
• index.tsx가 처음 "/" 페이지가 됨
• _app.tsx는 공통되는 레이아웃 작성.
  모든 페이지에 공통으로 들어가는걸 넣어주려면 여기에 넣어주면 됨.
  (url을 통해 특정 페이지에 진입하기 전 통과하는 인터셉터 페이지)
• 만약 about이라는 페이지를 만들려면 pages폴더 안에 about.tsx를 생성해주면 됨

public

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

styles

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

next.config.js

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

그 외 특징

Pre-rendering

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

Pre-render 테스트

1. 자바스크립트 Disable
   Chrome tool 설정

2. 툴을 사용하여 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} } 
}

getServerSideProps

Server Side Rendering으로 요청이 있을 때 데이터를 불러온다.

사용할 때
'요청할 때 데이터를 가져와야 하는 페이지'를 미리 랜더링 해야 할 때 사용.
서버가 모든 요청에 대한 결과를 계산하고, 추가 구성없이 CDN에 의해 결과를 캐시할 수 없기 때문에 첫번째 바이트까지의 시간은 getStaticProps보다 느리다.