Next.js로 블로그 만들기 - 1

next.js의 공식 홈페이지의 튜토리얼을 따라가보며 공부한 내용들입니다

Next의 라우팅

넥스트는 pages 디렉토리 아래에 모든 폴더와 파일을 라우트한다

예를들어 pages/index.js 는 url '/' 페이지 연결되고

pages/post/post1.js 는 url /post/post1 페이지로 연결된다

딱히 어떠한 처리를 해주지 않아도 pages안에 컴포넌트들을 작성하면 넥스트가 알아서 라우팅해주는 것

페이지 만들기

pages 폴더 밑에 posts/frist-post.js 를 만들어 보자

export default function FirstPost(){
    return <h1>First Post</h1>
}

여기저기 찾아본 결과 pages아래에 만드는 컴포넌트의 파일이름은 소문자로 하되 컴포넌트의 이름은 무엇이 오든 상관없고(없어도됨)

최종적으로 보여주어야하는 컴포넌트는 반드시 default로 export되어야한다 그래야 넥스트가 인식하고 라우트하는 듯

pages/posts/frist-post.js파일을 만드는 것 만으로 /post/first-post 페이지를 만들었다

페이지 이동

넥스트에서 페이지를 이동할 때는 a태그를 Link 컴포넌트로 래핑(Wrapping)해서 사용한다

//index.js
import Link from "next/link";

<Link href={'/posts/first-post'}><a>this page</a></Link>

이제 this page를 클릭하면 만들었던 first-post페이지로 넘어가는 것을 볼 수 있다

클라이언트 사이드 렌더링

넥스트의 Link를 이용한 페이지 이동은 서버 사이드가 아닌 클라이언트 사이드의 이동을 가능하게 한다

전체 페이지를 다시 로드하지 않고 필요한 부분만 골라서 가져오는 것

code spliting과 prefetch

넥스트는 개발자가 따로 신경써주지 않아도 자동으로 코드 스플리팅을 한다

그래서 모든 js를 한 번에 로드하는 것이 아닌 내가 보고있는 페이지의 js만 로드한다

그리고 그 페이지 내에 Link 컴포넌트 존재하면 Link 컴포넌트에 있는 url들은 넥스트가 백그라운드에서 미리 로드한다

이를 prefetch라고 하는데 리액트의 loadable라이브러리의 preload와 유사하다