Next.JS에서 동적 세그먼트 사용하기

Dynamic Segment

동적 세그먼트란 /user/:id/:operation에서 id와 operation처럼 경로에서 사용되는 변수를 말하며,
쿼리 문자열 방식보다 경로명이 좀 더 깔끔해지는 효과를 얻을 수 있습니다.

 

동적 세그먼트는 여러 형태로 쓰일 수 있는데, 살펴보면 대부분 아래의 형식입니다.

 

1. 경로의 뒤에 쓰이는 경우.
/user/:id

 

2. 경로의 중간에 쓰이는 경우.
/user/:id/edit

 

3. 혼합 형태
user/:id/edit/:attr

 

위와 같은 동적 경로를 Next.js에서 어떻게 구현하는지 차근차근 살펴봅시다.

 

 

경로의 뒤에 쓰이는 경우

pages 폴더에서 대괄호로 감싸진 폴더나 파일은 동적 세그먼트로 취급됩니다.
즉, /user/:id를 표현하고 싶다면, 아래처럼 폴더구조를 생성하면 됩니다.

.
└── /pages
    └── /user
        └── [id].tsx

 

 

경로의 중간에 쓰이는 경우

폴더도 동적 세그먼트로 활용될 수 있습니다.
/user/:id/edit를 표현하고 싶다면, 아래처럼 폴더구조를 생성하면 됩니다.

.
└── /pages
    └── /user
        └── /[id]
            └── edit.tsx

 

 

혼합 형태

2개 이상의 동적 세그먼트도 가능합니다.
user/:id/edit/:attr를 표현하고 싶다면, 아래처럼 폴더구조를 생성하면 됩니다.

.
└── /pages
    └── /user
        └── /[id]
            └── /edit
                └── [attr].tsx

 

 

동적 세그먼트의 값 얻어오기

getInitialProps 훅을 사용합니다.
아래의 예제코드는 user/:id/edit/:attr의 케이스를 설명합니다.

상태없는 컴포넌트 :

// pages/[id]/edit/[attr].tsx
import { NextPageContext } from "next";

export default function Example(props: { query: any }) {
    return (
        <div>
            <h1>{props.query.id}</h1>
            <h1>{props.query.attr}</h1>
        </div>
    );
}
Example.getInitialProps = ({ query }: NextPageContext) => {
    return { query };
};

 

상태있는 컴포넌트 :

// pages/[id]/edit/[attr].tsx
import { NextPageContext } from "next";
import React from "react";

export default class Example extends React.Component<{ query: { id: string; attr: string } }> {
    static getInitialProps({ query }: NextPageContext) {
        return { query };
    }

    render() {
        console.log();
        return (
            <div>
                <h1>{this.props.query.id}</h1>
                <h1>{this.props.query.attr}</h1>
            </div>
        );
    }
}