일반적으로 웹사이트와 웹 애플리케이션은 많은 다양한 페이지로 구성된다.
이제 애플리케이션에 페이지를 추가하는 방법을 살펴보자.
Next.js의 페이지
Next.js에서 페이지란 디렉터리 안에 있는 파일에서 익스포트 한 React 컴포넌트다.
페이지는 파일 이름을 기반으로 경로와 연결된다. 아래는 예시다.
- pages/index.js는 / 경로에 연결된다.
- pages/posts/first-post.js는 /posts/first-post 경로에 연결된다.
pages/posts/first-post.js를 생성하여 어떻게 작동하는지 살펴보자.
새 페이지 만들기
posts 디렉터리 안에 first-post.js파일을 만들고 아래와 같이 입력해 보자.
(컴포넌트 이름은 어떻게 지어도 괜찮지만, export default는 꼭 해줘야 한다.)
export default function FirstPost() {
return <h1>First Post</h1>;
}
이제 개발 서버가 실행 중인지 확인하고, http://localhost:3000/posts/first-post 에 접속하면 페이지가 표시된다.
페이지의 디렉터리에 JS 파일을 생성하면, 그 파일 경로가 곧 URL 경로가 된다.
어떻게 보면 HTML 또는 PHP 파일을 사용하여 웹사이트를 구축하는 것과 비슷하다.
HTML을 작성하는 대신 JSX를 작성하고 React 컴포넌트를 사용한다는 점만 다를 뿐.
Link 컴포넌트
웹사이트 페이지 간 링크시 보통 <a> HTML 태그를 사용한다.
하지만 Next.js에서는 Link 컴포넌트를 사용한다.
<Link>를 사용하면 클라이언트 사이드에서 내비게이션을 수행할 수 있다.
동작을 더 잘 제어할 수 있는 props도 사용할 수 있다.
사용해보기
먼저, pages/index.js 상단에 아래 코드를 추가하여 next/link에서 Link 컴포넌트를 임포트한다:
import Link from 'next/link';
그런 다음 아래와 같이 바꿔주면 된다.
<h1 className="title">
Read <Link href="/posts/first-post">this page!</Link>
</h1>
Link 컴포넌트는 <a> 태그를 사용하는 것과 유사하지만, <a href="..."> 대신 <Link href="...">를 사용한다는 점이 다르다.
클라이언트 사이드 네비게이션 (Client-Side Navigation)
Link 컴포넌트 사용시, 앱의 페이지 간에도 클라이언트 사이드 네비게이션이 가능하다.
자바스크립트로 페이지 전환이 이루어짐을 의미하며, 디폴트 네비게이션보다 빠르다.
다음은 이를 확인할 수 있는 간단한 방법이다:
- 브라우저 개발자 도구로 <html>의 배경 CSS 속성을 노란색으로 변경한다.
- 링크를 클릭해서 두 페이지 사이를 이동해본다.
- 페이지가 전환될때도 노란색 배경이 유지되는 것을 볼 수 있습니다.
이는 브라우저가 전체 페이지를 로드하는게 아니라, 클라이언트 사이드 네비게이션이 작동하고 있음을 나타낸다.
<Link> 컴포넌트 대신 <a>를 사용했다면 브라우저는 전체 새로고침을 수행하므로 링크 클릭 시 배경색이 지워진다.
코드분할과 프리페칭(Code splitting and prefetching)
Next.js는 코드분할을 자동으로 수행한다. 각 페이지는 해당 페이지에 필요한 부분만 로드한다.
이 말은 홈페이지가 렌더링될 때, 다른 페이지의 코드는 처음에 제공되지 않는다.
따라서 페이지가 수백개라도 홈페이지는 빠르게 로드된다.
요청한 페이지의 코드만 로드한다는건 페이지가 격리됨을 의미하기도 한다.
그래서 특정 페이지에서 오류가 발생해도 나머지 애플리케이션은 영향을 받지 않고 정상 작동한다.
또한 Next.js의 프로덕션 빌드에서는 프리페칭 기능을 제공한다.
Link 컴포넌트가 브라우저의 뷰포트에 표시되면, 연결된 페이지의 코드가 백그라운드에서 자동으로 프리페치된다.
링크를 클릭할 때쯤이면 대상 페이지의 코드가 이미 로드되어 페이지 전환이 거의 즉시 이루어진다.
요약
Next.js는 애플리케이션을 자동으로 최적화하는 코드 분할, 클라이언트 사이드 네비게이션, 프리페칭을 통해 최상의 성능을 제공한다.
별도 라우팅 라이브러리도 필요하지 않다. pages 폴더에 파일 경로를 생성하고, 내장된 Link 컴포넌트를 사용하기 때문이다.
(Next.js 앱 외부의 외부 페이지로 연결해야 하는 경우, 그냥 <a> 태그를 사용하면 된다.)
Link 컴포넌트에 대한 자세한 내용은 next/link에 대한 API reference와 라우팅 문서에서 확인할 수 있다.
Quick Review: A user opens their browser and navigates to your-blog.com/posts/first-post. What JavaScript is initially loaded for this page? Only the JavaScript for /posts/first-post is loaded.
'개발 > Next.js' 카테고리의 다른 글
| [Docs] 서드파티 자바스크립트 추가하기 (0) | 2023.05.07 |
|---|---|
| [Docs] 메타데이터 다루기 (0) | 2023.05.06 |
| [Docs] 정적 파일 사용하기 (0) | 2023.04.26 |
| [Docs] Next.js로 앱 생성하기 (0) | 2023.04.18 |
| [Docs]Next.js는 무엇일까 (0) | 2023.04.18 |