[Next.js Learn] Navigate Between Pages(2) - Pages in Next.js

Next.js의 Pages

Next.js에서 페이지는 pages 디렉토리의 파일에서 내보낸 React 컴포넌트입니다.

파일 이름을 기반으로 페이지는 라우트와 연관됩니다. 예를 들어, 개발 환경에서는 다음과 같습니다:

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

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

새 페이지 만들기(Create a New Page)

pages 디렉토리 아래에 posts 디렉토리를 생성하세요.

그리고 posts 디렉토리 안에 first-post.js라는 파일을 생성하고 다음 내용으로 채워넣으세요:

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

컴포넌트의 이름은 자유롭게 지정할 수 있지만, 반드시 기본 내보내기(default export)로 내보내야 합니다.

이제 개발 서버가 실행 중인지 확인하고 http://localhost:3000/posts/first-post에 접속하세요. 그러면 페이지가 표시됩니다.

이렇게 하면 Next.js에서 다른 페이지를 생성할 수 있습니다.

단순히 pages 디렉토리 아래에 JS 파일을 생성하면, 파일의 경로가 URL 경로가 됩니다.

어떤 면에서는 HTML이나 PHP 파일을 사용하여 웹사이트를 구축하는 것과 비슷합니다. HTML 대신 JSX를 작성하고 React 컴포넌트를 사용합니다.

이제 새롭게 추가한 페이지로 이동할 수 있는 링크를 홈페이지에 추가해 보겠습니다.

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