Next.js 페이지 연결, Routing

Next.js 페이지 연결, Routing

 

먼저 실습을 하기 위해 프로젝트 샘플을 생성합니다.

Next.js 튜토리얼에서 샘플 프로젝트 생성 명령어를 입력하면, Next App 프로젝트 디렉터리가 생성됩니다.

 

Next.js App 예제 생성하기

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

 

반응형

 

생성된 프로젝트 디렉터리를 보면

pages라고 하는 폴더가 있습니다.

 

Next.js에서는

pages 폴더의 하위 파일들에 대해서

file system routing을 할 수 있도록 구성되어 있습니다.

 

따라서 file 이름이 곧 path처럼 동작합니다..

 

이것은 file 이름이 곧 url path라는 것을 말하는데

예시는 다음과 같습니다.

file: /pages/index.js => path: /

file: /pages/posts/first-post.js => path: /posts/first-post

 

HTML에서는 a tag를 사용해서 웹 페이지들을 연결해 주었다면, Next.js에서는 내장된 Link 컴포넌트를 사용합니다.

Link 컴포넌트를 활용하는 것은 Client-side로 동작합니다.

 

 

Next.js 페이지 연결, Routing

Link 컴포넌트를 활용해서 routing 하는 것을 확인해 보겠습니다.

프로젝트에서 pages 디렉터리 내에 있는 파일들은 파일 시스템 구조로 routing을 한다고 했습니다.

 

위에서 소개한 예제처럼 파일을 구성할 것입니다.

 

(root)

ㄴpages

    ㄴindex.js

    ㄴposts

        ㄴfirst-post.js

 

index.js 파일에서 first-post.js 파일을 연결하기 위해 index.js 파일을 수정합니다.

 

 

작업 순서

1. Link컴포넌트를 사용하기 위해서 'next/link'를 import 시켜주어야 합니다.

2. Link 컴포넌트를 선언하고, a tag처럼 href 속성을 사용해 해당 페이지 주소를 연결합니다. 페이지 주소는 파일의 경로를 입력합니다.

 

 

 

작업 상세 보기

1. Link컴포넌트를 사용하기 위해서 'next/link'를 import 시켜주어야 합니다.

import 구문은 파일 최상단에 위치합니다.

 

 

2. Link 컴포넌트를 선언하고, a tag처럼 href 속성을 사용해 해당 페이지 주소를 연결합니다. 페이지 주소는 파일의 경로를 입력합니다.

 

index.js 파일 중 Link 컴포넌트를 사용한 코드

Next.js에서 Link 컴포넌트에 연결하려는 파일 경로를 입력할 때 확장자까지 사용하지는 않습니다.

확장자를 제거한 파일 경로를 작성합니다.

 

그리고 posts/first-post.js 파일은 index.js로 돌아갈 수 있는 링크를 사용합니다.

 

posts/first-post.js 파일 중 Link 컴포넌트를 사용한 코드

 

Next.js에서 Link 컴포넌트를 이용해서 Routing 하는 방법을 알아보았습니다.

 

Next.js와 Link 컴포넌트의 특징에 대해서 조금 더 알아보기로 합니다.

 

먼저 Link 컴포넌트의 특징으로는 HTML에서 a tag처럼 사용할 수 있습니다. 연결하는 속성명도 href를 사용합니다. Link 컴포넌트의 Routing은 client-side navigation을 하고, props를 허용합니다. React에서 Client-Side Rendering 했던 방식으로 Routing 한다고 보면 될 것 같습니다. Client-Side Rendering(CSR)을 하면 Client에서 부담을 느낄 것이라고 보겠지만 Next.js에선 페이지 요청이 있을 때 해당 페이지에서 필요한 코드만 분리해 가져와 일반 React보다 페이지를 더 빠르게 로드할 수 있습니다. (개발하면서 속도 차이는 잘 못 느끼겠지만요.ㅎㅎ)

Next.js의 특징 중 하나가 자동으로 최적화를 진행하기 때문에 많은 이점이 있다고 합니다.

 

위 예제를 보면서 우리는 Routing 관련 Lib을 설치하거나 세팅한 적이 없습니다. 즉 Next.js에서 Routing은 내장 기능으로 처리한다는 것입니다. 정리하면 Routing libraries가 요구되지 않고 pages에 있는 파일들을 Link 컴포넌트로 Routing 할 수 있습니다.

 

 

---

예제가 아닌 Next.js 프로젝트 생성하는 것부터 시작해보세요.

 

---

 

공부한 것을 기록하고 있습니다.

내용이 틀렸다면 지적해 주세요.

도움이 되셨다면 좋아요, 구독!