개발의변화
Next js 정리 2. 라우팅 시스템과 내장 컴포넌트 본문
주로 정리할 내용은 다음과 같다
- 클라이언트와 서버에서의 라우팅 시스템 작동 방식
- 페이지 간 이동 최적화
- Next.js가 정적 자원을 제공하는 방법
- 자동 이미지 최적화와 새로운 Image 컴포넌트를 사용한 이미지 제공 최적화 기법
- 컴포넌트에서 HTML 메타데이터 처리
- _app.js와 document.js 파일 내용 및 커스터마이징 방법
라우팅 시스템
React의 React Router라이브러리와의 차이는 React 라우팅 시스템은 클라이언트에서의 라우팅만 구현할 수 있다. 모든 페이지가 클라이언트에서만 만들어지고 렌더링 되기에 SSR렌더링은 개입하지 않는다.
Next.js는 파일시스템 기반 페이지와 라우팅을 사용
Next.js는 기본적으로 pages/ 디렉터리를 가지고 있다.
이 디렉터리 안의 모든 파일은 export한 react 컴포넌트라고 봐도 무방하고 즉 애플리케이션의 페이지와 라우팅 규칙을 의미
특히 새로운 페이지를 만들지 않는 동적라우팅을 활용할 수 있다.
pages/posts/[slug].js파일을 만든다면
[slug]는 경로 매개변수로 사용자가 브라우저 주소창에 입력하는 값은 모두 가질 수 있다.
-> 어떤 경로로 접근하든 동일한 JSX 코드를 렌더링
경로 매개변수를 어떻게 사용할 수 있을까 -> useRouter 훅 덕분에 별다른 어려움 없이 컴포넌트 안에서 경로 매개변수 사용가능
const {query} = useRouter();query 변수값이 경로 매개변수로 되어있다.
클라이언트에서의 내비게이션
HTML의 표준 태그를 사용해서 페이지들을 연결할 수도 있지만 Next.js 에서만 존재하는 Link 컴포넌트를 통해 서로 다른 라우트 간의 이동을 최적화 할 수 있음
<Link href = '/about' > Home</Link>
<Link href = '/about' > About</Link>
Link ref = {{
pathname: '/blog/[date]/[slug]'
query: {
date: '2020-01-01',
slug: 'happy-new-year',
foo: 'bar'
}
}}
동적 경로 매개변수를 통해 페이지를 더 쉽게 연결가능
<Link href = '/blog/[date]/slug]' as = '/blog/2021-01-01/happy-new-year'>
Read post
</Link>이렇게 속성을 객체에 전달할 수 있다.
<Link href = '/about' ref={
pathname: '/blog/[date]/[slug]'
query: {
date: '2020-01-01',
slug: 'happy-new-year',
foo: 'bar'
}
} > router.push()
를 활용하여 강제로 페이지 이동처리도 가능하다.
메타데이터
메타데이터를 제공하지 않으면 웹 사이트에 필요한 정보를 제공하지 않는다고 판단해 해당 페이지의 점수를 낮게 매길 것임.
그렇기에 공통 메타 태그 그룹을 두어서 여러 개의 컴포넌트를 만드는 것이 좋다.
export const getMetadata = (metadataProps?: generateMetadataProps) => {
const { title, description, asPath, ogImage } = metadataProps || {};
const TITLE = title ? `${title} | 반디부디` : META.title;
const DESCRIPTION = description || META.description;
const PAGE_URL = asPath ? asPath : '';
const OG_IMAGE = ogImage || META.ogImage;
const metadata: Metadata = {
metadataBase: new URL(META.url),
alternates: {
canonical: PAGE_URL,
},
title: TITLE,
description: DESCRIPTION,
keywords: [...META.keyword],
openGraph: {
title: TITLE,
description: DESCRIPTION,
siteName: TITLE,
locale: 'ko_KR',
type: 'website',
url: PAGE_URL,
images: {
url: OG_IMAGE,
},
},
verification: {
google: META.googleVerification,
other: {
'naver-site-verification': META.naverVerification,
},
},
twitter: {
title: TITLE,
description: DESCRIPTION,
images: {
url: OG_IMAGE,
},
},
};
return metadata;
};
이렇게 메타 태그 그룹에 대한 컴포넌트를 만들고 이를 다른 컴포넌트에 주입하여 활용할 수 있다.
_app.js와 _document.js 페이지 커스터마이징
navbar에 필요한 헤더를
<QueryClientProvider client={queryClient}>
<NavBar/>
<Component {...pageProps} />
</QueryClientProvider>이런 형태로 나타낼 수 있다.
즉 _app.js 파일의 주된 사용 목적은 페이지 이동 시 서로 다른 페이지 간 상태 유지, 전역 스타일 추가, 페이지 레이아웃 관리, 페이지 속성에 데이터를 추가하는 것과 같다.
만약 모든 페이지를 렌더링할 떄마다 서버에서 특정 데이터를 불러와야 한다면 getInitialProps 함수를 사용할 수 있다.
,,
와 같은 기본적인 HTML 태그를 정의할 필요가 없으나 해당 태그 내용들을 Next.js에서 수정이 가능하다. _document.js를 활용하는 방식이다.
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
// html 태그에 언어 설정
<Html lang="ko">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;Html:태그에 해당, 여기에 lang과 같은 표준 HTML 속성들 전달
Head: 애플리케이션의 모든 페이지에 대한 공통 태그를 정의할 때 이 컴포넌트 사용가능
Main: Next.js가 페이지 컴포넌트를 렌더링 하는 곳 -> 브라우저에서 초기화되지 않기 때문에 페이지 간에 공통으로 사용하는 컴포넌트가 있다면 반드시 _app.js 파일에서 해당 컴포넌트를 사용
NextScript: 클라이언트에 전송할 페이지를 렌더링하고, 클라이언트에서 실행할 코드나 리액트 하이드레이션과 같은 작업을 처리할 수 있는 커스텀 스크립트 끼워넣어야 함
'프론트엔드' 카테고리의 다른 글
| Next Js 정리 1. 렌더링 전략 (0) | 2024.04.08 |
|---|---|
| 모던리액트딥다이브 1. 이벤트루프와 비동기 통신 이해 (0) | 2024.03.28 |
| 모던리액트딥다이브 - 01 동등비교 (0) | 2024.03.27 |
