1. 시작 코드 다운로드(선택 사항)

이전 단원에서 계속 진행하지 않는 경우 아래에서 이 단원의 시작 코드를 다운로드, 설치 및 실행할 수 있습니다. nextjs-blog이것은 이전 레슨의 결과와 동일하도록 디렉토리를 설정합니다 .

다시 말하지만, 이전 단원을 방금 마친 경우에는 필요하지 않습니다.

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/navigate-between-pages-starter"

시작하기 코드

// 파일 접근
$ cd nextj-blog

// 시작코드
$ npm run dev

// build
$ npm run build

2. 페이지 간 탐색

Next.js에서 쓸 수 있는 페이지의 종류
: .js, .jsx,.ts,.tsx, pages

pages/about.js => 이렇게 쓰면 /about 이라는 페이지로 접근할 수 있습니다.

{/* /about 페이지 */}

function About() {
  return <div>About</div>
}

export default About

동적 경로가 있는 페이지

Next.js 는 동적 경로가 있는 페이지를 지원합니다.

`pages/post/[id].js` 라는 파일을 호출하면,  `pages/1` `pages/2` 같은 파일을 부를 수 있습니다.

3 .새 페이지 만들기

페이지는 파일 이름에 따라 경로와 연결됩니다.
pages/index.js 는 / 루트 경로와 연결됩니다.
pages/posts/first-post.js 파일을 생성하게 되면, /posts/first-post.js 루트와 연결이 됩니다
npx create-next-app 을 통해 이미 만들어진 pages/index.js 파일이 있으니,
pages/posts/first-post.js 을 만들어서 어떻게 동작하는지 확인해 봅니다.

// 아래에 새 디렉토리를 만듭니다. 
`post` `pages`

// `posts` 디렉토리 내부에 `first-post.js` 파일을 만들고, 다음 콘텐츠를 넣어봅시다.

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

http://localhosl:3000/posts/first-post 를 실행했을 때 이와 같은 페이지가 보여야 합니다.

이것이 Next.js에서 다른 페이지를 만드는 방법입니다.
디렉토리 아래에 JS파일을 생성하기만 하면 파일의 경로가 URL경로가 됩니다.
어떻게 보면 HTML이나 PHP 파일을 사용하여 웹사이트를 구축하는 것과 비슷합니다.
HTML을 작성하는 대신 JSX를 작성하고 React 구성 요소를 사용합니다.