Programming/nextjs

Next.js 간단한 첫 블로그를 만들어 보자(2): 페이지 간 탐색

조용장 2022. 4. 8. 23:14

저번 시간에 첫 앱을 만들어 보았습니다.

지금 앱은 페이지가 하나뿐입니다. 웹사이트와 웹 애플리케이션에는 일반적으로 다양한 페이지가 있습니다. 

 

그렇기에 이번 시간에는 페이지 간 탐색에 대해 배워 보겠습니다.

 

https://nextjs.org/learn/basics/navigate-between-pages

 

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

nextjs.org

nextjs의 첫 앱을 만드는 방법이며 영어로 된 문서를 한글로 작성해보며 작성하고 있습니다. 틀린 부분도 있겠지만.. 지적해주시면 수정해 놓겠습니다~

 

이 단원에서 배울 내용

이 단원에서는 다음을 수행합니다.

  • 통합 파일 시스템 라우팅 을 사용하여 새 페이지를 만듭니다 .
  • Link구성 요소를 사용하여 페이지 간 클라이언트 측 탐색을 활성화 하는 방법을 알아봅니다 .
  • 코드 분할 및 프리페칭에 대한 기본 제공 지원에 대해 알아보세요.

이전 시간에 사용한 웹페이지를 이어서 진행하면 됩니다. 

여기서 부터 진행을 하고 싶다면 아래 코드를 다운 받아서 사용하시면 됩니다.

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter"

 

Next.js의 페이지

Next.js에서 페이지는 페이지 디렉토리의 파일에서 내보낸 React 구성 요소입니다.

페이지는 파일 이름에 따라 경로와 연결됩니다. 아래를 참고해보면

  • pages/index.js는 / 경로와 연결됩니다.
  • pages/posts/first-post.js는 /posts/first-post 경로와 연결됩니다.

이미 pages/index.js 파일이 있으므로 어떻게 작동하는지 보기 위해 pages/posts/first-post.js를 생성해 보겠습니다.

 

새 페이지를 만들기

'pages' 폴더 안에 posts 폴더를 생성합니다.이어서 posts 폴더 안에 first-post.js 파일을 생성합니다.그리고 first-post.js 안에 아래 코드를 입력합니다.

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

구성 요소의 이름은 제한이 없지만 default로  내보내야 합니다.

 

이제 개발 서버를 실행 시키고 http://localhost:3000/posts/first-post에 들어가보면 아래와 같이 이미지처럼 나옵니다.

이것이 Next.js에서 다른 페이지를 만드는 방법입니다.

이렇게 pages 폴더안에 JS 파일을 생성하기만 하면 파일의 경로가 URL 경로가 됩니다.

어떻게 보면 HTML이나 PHP 파일을 사용하여 웹사이트를 구축하는 것과 비슷합니다. HTML을 작성하는 대신 JSX를 작성하고 React 구성 요소를 사용합니다.

 

새로 추가된 페이지에 대한 링크를 추가하여 홈페이지에서 이동할 수 있도록 해 보겠습니다.

 

Link Component

웹사이트에서 페이지 사이를 연결할 때 <a> HTML 태그를 사용합니다.

Next.js에서는 next/link의 'Link' Componet를 사용하여 <a> 태그를 래핑합니다. <Link>를 사용하면 애플리케이션의 다른 페이지로 client-side navigation을 수행할 수 있습니다.

 

<Link>를 사용해봅시다.

먼저 'pages/index.js'를 열고 맨 위에 다음 줄을 추가하여 next/link의 'Link' Componet를 가져옵니다.

import Link from 'next/link'

그런 다음 다음과 같은 h1 태그를 찾습니다.

<h1 className="title">
  Learn <a href="https://nextjs.org">Next.js!</a>
</h1>

이를 아래와 같이 변경합니다!

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

tip: {' '}는 여러 줄에 걸쳐 텍스트를 나누는 데 사용되는 빈 공간을 추가합니다.

 

다음으로 'pages/posts/first-post.js'를 열고 내용을 아래와 같이 바꿉니다.

import Link from 'next/link'

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

보시다시피 Link 구성 요소는 <a> 태그를 사용하는 것과 유사하지만 <a href="…"> 대신 <Link href="…">를 사용하고 내부에 <a> 태그를 넣습니다.

 

이제 잘 작동하는지 확인해 봅시다. 이제 각 페이지에 링크를 통해 왔다갔다 이동할 수 있습니다.

Client-Side Navigation

Link component는 동일한 Next.js 앱의 두 페이지 간에 Client-Side Navigation을 가능하게 합니다.

Client-Side Navigation은 브라우저에서 수행하는 기본 탐색보다 빠른 JavaScript를 사용하여 페이지 전환이 발생함을 의미합니다.

이것을 확인하는 방법은 다음과 같습니다.

  • 브라우저의 개발자 도구를 사용하여 <html>에 background의 CSS 속성을 노란색으로 변경합니다.
  • 링크를 클릭하면 두 페이지 사이를 앞뒤로 이동해 봅시다.
  • 페이지 전환 사이에 노란색 배경이 지속되는 것을 볼 수 있습니다.

이는 브라우저가 전체 페이지를 로드하지 않고 클라이언트 측 탐색이 작동 중임을 나타냅니다.

<Link href="…"> 대신 <a href="…">를 사용하고 이 작업을 수행한 경우 브라우저가 전체 새로 고침을 수행하기 때문에 링크 클릭 시 배경색이 지워집니다.

 

코드 분할 및 프리페칭

Next.js는 자동으로 코드 분할을 수행하므로 각 페이지는 해당 페이지에 필요한 것만 로드합니다. 즉, 홈페이지가 렌더링될 때 다른 페이지의 코드는 처음에 제공되지 않습니다.

이렇게 하면 수백 페이지가 있는 경우에도 홈페이지가 빠르게 로드됩니다.

요청한 페이지의 코드만 로드하면 페이지가 격리됩니다. 특정 페이지에서 오류가 발생하더라도 나머지 애플리케이션은 계속 작동합니다.

또한 Next.js의 프로덕션 빌드에서 Link 구성 요소가 브라우저의 뷰포트에 나타날 때마다 Next.js는 백그라운드에서 연결된 페이지에 대한 코드를 자동으로 미리 가져옵니다. 링크를 클릭할 때쯤이면 대상 페이지에 대한 코드가 이미 백그라운드에서 로드되고 페이지 전환이 거의 즉각적으로 이루어집니다!

 

요약!

Next.js는 코드 분할, 클라이언트 측 탐색 및 프리페치(프로덕션에서)를 통해 최상의 성능을 위해 애플리케이션을 자동으로 최적화합니다.

pages 아래에 파일로 경로를 만들고 Link Component를 사용하여 라우팅 라이브러리가 필요하지 않습니다.

또한 라우팅 문서에서 일반적으로 next/link와 라우팅에 대한 API 참조의 Link component에 대해 자세히 알아볼 수 있습니다.

 

여기까지가 페이지 간 탐색에 대해 배워보았습니다~