[공식문서] NextJS 페이지 간 이동하기 #3

Next.js에서의 페이지들

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

페이지는 파일 이름을 기반으로 경로와 관련됩니다. 예를 들어, 개발 환경에서 : 

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

 

이미 pages/index.js 파일이 있으므로 pages/posts/first-post.js를 만들어 보겠습니다.

 

새 페이지 만들기

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

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

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

 

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

 

이제 개발 서버가 실행 중인지 확인하고 http://localhost:3000/posts/first-post를 방문하세요. 아래 페이지가 나타날 것입니다.

Next.js 공식문서 - 페이지 추가

 

이것이 Next.js에서 다양한 페이지를 생성하는 방법입니다.

 

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

 

어떤 면에서는 HTML이나 PHP 파일을 사용하여 웹 사이트를 만드는 것과 유사합니다. HTML 대신 JSX를 작성하여 React 컴포넌트를 사용한다는 차이가 있습니다.

 

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