5. 동적 라우팅 – 동적 경로를 사용한 페이지 생성

 Next.js는 동적 라우팅을 통해 URL의 일부를 변수로 설정하여, 하나의 페이지에서 다양한 데이터를 표시할 수 있도록 지원합니다. 이를 통해 동일한 페이지를 여러 번 재사용하면서도 다른 콘텐츠를 효율적으로 관리할 수 있습니다. 이번 글에서는 Next.js에서 동적 라우팅을 사용하여 페이지를 생성하는 방법을 초보자도 쉽게 이해할 수 있도록 설명하겠습니다.

1. 동적 라우팅 개념 이해하기

동적 라우팅은 URL 경로에 변수를 포함시켜, 다양한 콘텐츠를 하나의 페이지에서 처리할 수 있게 해줍니다. 예를 들어, 블로그에서 각각 다른 글을 표시하는 페이지를 하나의 파일로 처리할 수 있습니다. 동적 라우팅을 사용하면 코드 중복을 줄이고, 효율적으로 콘텐츠를 관리할 수 있습니다.

Next.js에서는 동적 라우팅을 구현하기 위해 파일 이름에 대괄호([])를 사용합니다. 예를 들어, pages/posts/[id].js 파일을 만들면, /posts/1, /posts/2와 같은 URL을 처리할 수 있게 됩니다.

2. 동적 라우팅 페이지 만들기

Next.js에서 동적 경로를 사용하는 페이지를 만들려면, pages 폴더에 [변수명].js 형식의 파일을 생성합니다. 그 후, 해당 페이지에서 useRouter 훅을 사용하여 동적 경로에서 값을 가져옵니다.

예시 코드:

javascript
// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query; // URL에서 동적 값(id)을 가져옴

  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is the page for post {id}.</p>
    </div>
  );
}

위 코드에서 useRouter 훅을 사용하여, /posts/[id]에서 id 값을 가져오고, 이를 화면에 표시합니다. 예를 들어, /posts/1 경로로 접근하면 Post ID: 1이라는 텍스트가 표시됩니다.

3. 동적 라우팅 활용 예시

동적 라우팅은 다양한 콘텐츠를 처리할 때 유용하게 사용할 수 있습니다. 예를 들어, 블로그 게시글, 상품 상세 페이지 등에서 동적 경로를 활용하여 각기 다른 데이터를 표시할 수 있습니다.

예시 코드:

javascript
// pages/products/[productId].js
import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const { productId } = router.query; // URL에서 동적 값(productId)을 가져옴

  return (
    <div>
      <h1>Product ID: {productId}</h1>
      <p>This is the page for product {productId}.</p>
    </div>
  );
}

이 예시에서는 /products/[productId] 경로를 사용하여 다양한 상품 페이지를 동적으로 처리할 수 있습니다. 예를 들어, /products/123과 같이 접근하면 상품 ID가 123인 상품 정보를 표시할 수 있습니다.

4. 동적 라우팅과 getStaticPaths, getStaticProps 사용하기

Next.js에서는 동적 라우팅을 더욱 효율적으로 활용할 수 있도록 getStaticPaths와 getStaticProps를 지원합니다. 이를 사용하면, 동적 경로에 해당하는 페이지들을 빌드 시 미리 생성하여 성능을 최적화할 수 있습니다.

예시 코드:

javascript
// pages/posts/[id].js
import { useRouter } from 'next/router';

export async function getStaticPaths() {
  // 동적 경로에 해당하는 모든 경로를 반환
  const paths = [
    { params: { id: '1' } },
    { params: { id: '2' } },
  ];
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const { id } = params;
  // 실제 데이터 가져오기 예시 (API 호출 등)
  const postData = { id, title: `Post ${id}` };

  return { props: { postData } };
}

export default function Post({ postData }) {
  return (
    <div>
      <h1>{postData.title}</h1>
      <p>This is the page for post {postData.id}.</p>
    </div>
  );
}

위 코드에서 getStaticPaths는 동적 경로에 해당하는 모든 경로를 반환하고, getStaticProps는 해당 경로에 필요한 데이터를 가져옵니다. 이 방식은 빌드 시에 모든 페이지를 미리 생성하여 성능을 최적화할 수 있습니다.

5. 동적 라우팅의 장점

동적 라우팅을 사용하면 코드 중복을 줄이고, 다양한 콘텐츠를 효율적으로 처리할 수 있습니다. 또한, getStaticPaths와 getStaticProps를 활용하면 SEO 최적화와 성능 최적화를 동시에 할 수 있어, 웹 애플리케이션의 속도와 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다.

결론

Next.js의 동적 라우팅 기능을 활용하면, 하나의 페이지에서 다양한 데이터를 효율적으로 처리할 수 있습니다. 동적 경로를 사용하여 URL을 변수로 설정하고, useRouter 훅을 사용하여 동적 값을 가져올 수 있습니다. 또한, getStaticPaths와 getStaticProps를 사용하여 성능과 SEO를 최적화할 수 있습니다. Next.js에서 동적 라우팅을 잘 활용하여 더욱 효율적이고 빠른 웹 애플리케이션을 개발해 보세요.

4. 페이지 만들기 – Next.js에서 페이지 생성 및 라우팅

 Next.js는 React 기반의 프레임워크로, 빠르고 효율적으로 웹 애플리케이션을 개발할 수 있는 강력한 도구입니다. 그 중에서도 Next.js의 가장 큰 특징은 페이지 생성과 라우팅이 매우 간단하다는 점입니다. 이번 글에서는 Next.js에서 페이지를 생성하고, 라우팅을 설정하는 방법을 초보자도 쉽게 이해할 수 있도록 설명드리겠습니다.

1. Next.js에서 페이지 생성하기

Next.js에서 페이지는 pages 폴더 내에 JavaScript 파일을 추가하여 생성할 수 있습니다. 이 폴더 내의 파일들은 자동으로 해당 경로와 연결되어, 페이지가 생성됩니다. 예를 들어, pages/about.js 파일을 추가하면 /about 경로로 접근할 수 있는 페이지가 자동으로 만들어집니다.

페이지 생성 방법:

1. pages 폴더에 새로운 JavaScript 파일을 추가합니다.
2. 그 파일에 React 컴포넌트를 작성하여 해당 페이지의 내용을 정의합니다.

예시 코드:

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the About page of our Next.js application.</p>
    </div>
  );
}

위 코드를 작성하면, /about 경로로 접근 시 About Us라는 제목과 간단한 텍스트가 표시된 페이지가 나타납니다.

2. 동적 라우팅 (Dynamic Routing)

Next.js는 파일 이름을 기반으로 라우팅을 자동으로 처리하지만, 동적 라우팅도 지원합니다. 동적 라우팅은 URL 경로의 일부를 변수로 설정하여, 동일한 페이지에서 다른 데이터를 표시할 수 있도록 합니다.

동적 라우팅 설정 방법:

1. 파일 이름에 대괄호([])를 사용하여 변수를 설정합니다.
2. 해당 페이지에서 useRouter 훅을 사용하여 동적 경로의 값을 가져옵니다.

예시 코드:

// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post ID: {id}</h1>
      <p>This is the page for post {id}.</p>
    </div>
  );
}

위 예시에서는 [id].js 파일을 사용하여, /posts/1, /posts/2와 같은 동적 URL을 처리할 수 있습니다. useRouter 훅을 사용하여 URL의 id 값을 가져와 해당 데이터를 페이지에 표시할 수 있습니다.

3. 링크 추가하기 – 페이지 간 이동

Next.js에서는 페이지 간 이동을 위해 next/link 모듈을 제공합니다. 이 모듈을 사용하면, 클라이언트 사이드에서 빠르게 페이지를 전환할 수 있습니다.

링크 추가 방법:

1. next/link를 임포트합니다.
2. 링크를 클릭했을 때 이동할 경로를 href 속성으로 지정합니다.

예시 코드:

// pages/index.js
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>Welcome to Our Website</h1>
      <p>
        <Link href="/about">
          <a>Learn more about us</a>
        </Link>
      </p>
    </div>
  );
}

위 코드를 작성하면, Welcome to Our Website라는 텍스트 아래에 Learn more about us라는 링크가 생성됩니다. 클릭하면 /about 페이지로 이동하게 됩니다.

4. URL 쿼리 파라미터 사용하기

Next.js에서는 URL에 쿼리 파라미터를 추가하여 데이터를 전달할 수 있습니다. useRouter 훅을 사용하여 URL의 쿼리 파라미터를 쉽게 가져올 수 있습니다.

쿼리 파라미터 사용 방법:

1. href 속성에 쿼리 파라미터를 추가합니다.
2. useRouter 훅을 사용하여 해당 값을 가져옵니다.

예시 코드:

// pages/search.js
import { useRouter } from 'next/router';

export default function Search() {
  const router = useRouter();
  const { query } = router.query;

  return (
    <div>
      <h1>Search Results</h1>
      <p>Searching for: {query}</p>
    </div>
  );
}

위 예시에서는 /search?query=Next.js와 같은 URL로 접속할 때, 쿼리 파라미터인 query 값을 가져와 페이지에 표시할 수 있습니다.

5. Next.js 페이지 생성과 라우팅의 장점

Next.js의 페이지 생성과 라우팅은 매우 직관적이고 간단합니다. pages 폴더에 파일을 추가하는 것만으로 라우팅을 자동으로 처리해주며, 동적 라우팅과 쿼리 파라미터 사용도 매우 간편합니다. 이러한 점은 웹 애플리케이션을 개발할 때 생산성을 높이고, 코드의 유지 보수를 용이하게 만들어 줍니다.

결론

Next.js에서 페이지를 생성하고 라우팅을 설정하는 방법을 알아보았습니다. pages 폴더에 파일을 추가하여 자동으로 페이지를 생성하고, 동적 라우팅과 쿼리 파라미터를 활용하면 더욱 유용한 웹 애플리케이션을 개발할 수 있습니다. 또한, next/link를 사용하면 페이지 간의 이동이 매우 간단하고 빠르게 이루어집니다. Next.js를 사용하여 페이지 생성과 라우팅을 손쉽게 구현해 보세요.