Next.js 핵심개념

Posted on

주요 장점

SSR+CSR의 혼합 사용

파일 베이스 라우팅

기존 리액트의 경우 url을 변경하지만 서버에 요청을 보내진 않는다. (SPA)

리액트 라우터는 이를 제공해주긴 하지만 컴포넌트에 계속 Router를 감싸줘야하고 이는 다른 페이지에도 동일한 코드를 계속 넣어줘야한다.

코드 대신 페이지와 루트 정의를 폴더와 파일로 한다. 이로 인해 코드가 줄고 라우팅의 의미를 더 명료하게 나타낼 수 있다. 중첩 라우트, 동적 라우트 지원

백엔드 코드를 쉽게 넣을 수 있다.

Next.js 실전 체험

☝️이 체험은 Next.js 공식문서에 따른 튜토리얼입니다. 초기 구성은 문서에서 확인해주세요

Next.js의 페이지

pages 밑에 posts라는 파일을 생성합니다. 이 아래에 firstpost.js를 아래와 같이 입력합니다.

Nextjs 계층구조 
1
2
3
export default function FirstPost() {
    return <h1>First Post</h1>
}

그럼 아래와 같이 라우팅이 된 것을 확인할 수 있습니다

firstPost로 라우팅되는 모습

링크 컴포넌트

링크 컴포넌트를 통해 페이지를 이동할 수 있는 링크를 달아줍니다.

import Link from 'next/link'를 하고 아래에 링크 컴포넌트를 만듭니다.

1
2
3
4
5
6
7
8
9
10
import Link from 'next/link'

/.../

<h1 className="title">
  Read{" "}
  <Link href="/posts/first-post">
    <a>this page!</a>
  </Link>
</h1>

이제 폴더 ./posts/first-post로 가서 되돌아가는 컴포넌트를 추가합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Link from 'next/link'

export default function FirstPost() {
    return (
        <>
            <h1>First Post</h1>
            <h2>
                <Link href="/">
                    <a>Back to home</a>
                </Link>
            </h2>
        </>
    )
}

그럼 아래와 같이 라우팅이 잘 동작하는 것을 볼 수 있습니다.

라우팅 동작

클라이언트 사이드 탐색

링크 컴포넌트는 같은 Next.js 앱에서 클라이언트 사이드 탐색이 가능합니다.

클라이언트 사이드 탐색이란 브라우저 탐색보다 빠른 자바스크립트를 사용하여 페이지 전환을 일으키는 것을 말합니다. 이를 확인하기 위해선 개발자 도구에서 배경색상을 노란색으로 하고 라우팅시 변경되지 않으면 클라이언트 사이드 탐색입니다.

이를 사용하고 싶지 않다면 Link 태그를 쓰지 않고 a태그만을 이용하여 해결할 수 있습니다.

메타데이터

메타데이터 수정을 위해선 Head컴포넌트를 사용합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Link from 'next/link'
import Head from 'next/head'

export default function FirstPost() {
    return (
        <>
            <Head>
                <title>First Post</title>
            </Head>
            <h1>First Post</h1>
            <h2>
                <Link href="/">
                    <a >Back to home</a>
                    </Link>
            </h2>
        </>
    )
}

위와 같이 Head를 통해 메타데이터를 수정할 수 있습니다.