[next.js] 메뉴얼 - 설치, 세팅, 라우팅

next.js

메뉴얼은 다음과 같다.

Learn | Next.js

 

 

설치 및 세팅

npx create-next-app@latest 프로젝트_이름

create-next-app내부적으로는 Next.js 앱을 부트스트랩하는 이라는 도구를 사용합니다 . 플래그를 통해 이 템플릿을 사용합니다 --example.

 

 

Next.js의 페이지

pages 폴더 안에 파일을 저장하면 자동으로 페이지가 작동된다.

 

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

구성 요소는 이름을 지정할 수 있지만 export default로 내보내야 합니다

 

예를 들어 pages/post/pages.js 폴더 안에 위에 파일이 저장되어있다면 

http://localhost:3000/post/pages 를 들어가면 된다.

 

 

링크 구성 요소

웹사이트에서 페이지를 연결할 때 <a>HTML 태그를 사용합니다.

Next.js에서 Link구성 요소를 사용하여 next/link애플리케이션의 페이지를 연결할 수 있습니다. 클라이언트 측 탐색을 수행하고 탐색 동작을 더 잘 제어할 수 있는 소품을<Link> 허용합니다 .

사용<Link>

먼저 를 열고 맨 위에 다음 줄을 추가하여 구성 요소를 pages/index.js가져옵니다 .Linknext/link

import Link from 'next/link';

그리고 다음과 같이 변경하십시오.

<h1 className="title">
  Read <Link href="/posts/first-post">this page!</Link>
</h1>

 

pages/posts/first-post.js콘텐츠를 열고 다음으로 바꿉니다.

import Link from 'next/link';

export default function FirstPost() {
  return (
    <>
      <h1>First Post</h1>
      <h2>
        <Link href="/">Back to home</Link>
      </h2>
    </>
  );
}

그럼 아래처럼 작동할 수 있다.

 

 

코드 분할 및 미리 가져오기

Next.js는 자동으로 코드 분할을 수행하므로 각 페이지는 해당 페이지에 필요한 항목만 로드합니다. 즉, 홈페이지가 렌더링될 때 다른 페이지에 대한 코드는 처음에 제공되지 않습니다.

이렇게 하면 수백 페이지가 있는 경우에도 홈페이지가 빠르게 로드됩니다.

요청한 페이지에 대한 코드만 로드하면 페이지가 격리됩니다. 특정 페이지에서 오류가 발생해도 애플리케이션의 나머지 부분은 계속 작동합니다.

또한 Next.js의 프로덕션 빌드에서 Link구성 요소가 브라우저의 뷰포트에 나타날 때마다 Next.js는 백그라운드에서 링크된 페이지에 대한 코드를 자동으로 미리 가져옵니다 . 링크를 클릭하면 대상 페이지의 코드가 이미 백그라운드에 로드되고 페이지 전환이 거의 즉각적으로 이루어집니다!