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를 사용하여 페이지 생성과 라우팅을 손쉽게 구현해 보세요.