Next.js에서는 파일 시스템 기반의 라우팅을 지원하기 때문에, 마치 HTML 파일을 만드는 것처럼 직관적으로 페이지를 나눌 수 있다.
Link 컴포넌트
Next.js에서는 링크를 연결하는데 a 태그 대신에 Link 컴포넌트를 사용한다.
a 태그를 사용하면 페이지를 이동할 때 페이지 전체를 다시 로딩하기 때문에 속도가 느리고, 빈 화면이 잠깐 보이면서 깜빡거림이 생기지만, Link 컴포넌트는 Next.js에서 내부적으로 여러 가지 최적화를 해주기 때문에 빠르고 부드러운 페이지 전환이 가능하다.
import Link from 'next/link';
export default Page() {
return <Link href="/">홈페이지로 이동</Link>;
}useRouter() Hook
쿼리 사용하기
router.query 값을 사용하면 페이지 주소에서 Params 값이나 쿼리스트링 값을 참조할 수 있다.
예를 들면 pages/products/[id].js 페이지에서 router.query['id'] 값으로 Params id에 해당하는 값을 가져올 수 있다.
pages/products/[id].js
import { useRouter } from 'next/router';
export default function Product() {
const router = useRouter();
const id = router.query['id'];
return <>Product #{id} 페이지</>;
}/search?q=티셔츠와 같은 주소로 들어왔을 때 router.query['q'] 값으로 쿼리스트링 q에 해당하는 값을 가져올 수 있었습니다.
pages/search.js
import { useRouter } from 'next/router';
export default function Search() {
const router = useRouter();
const q = router.query['q'];
return <>{q} 검색 결과</>;
}페이지 이동하기
router.push() 함수를 사용하면 코드로 페이지를 이동할 수 있다.
import { useState } from 'react';
import { useRouter } from 'next/router';
export default function SearchForm() {
const [value, setValue] = useState();
const router = useRouter();
function handleChange(e) {
setValue(e.target.value);
}
function handleSubmit(e) {
e.preventDefault();
if (!value) {
return router.push('/');
}
return router.push(`/search?q=${value}`);
}
return (
<form onSubmit={handleSubmit}>
<input name="q" value={value} onChange={handleChange} />
<button>검색</button>
</form>
);
}리다이렉트
next.config.js 파일을 수정하면 특정 주소에 대해서 리다이렉트할 주소를 지정할 수 있다. 예를 들어서 /products/:id라는 주소로 들어오면 /items/:id라는 주소로 이동시켜 줄 수 있다.
이때 permanent라는 속성으로 상태 코드를 정할 수 있었는데. permanent: false로 하면 307 Temporary Redirect를 하고, permanent: true로 하면 브라우저에 리다이렉트 정보를 저장하는 308 Permanent Redirect를 할 수 있었습니다.
/** @type {import('next').NextConfig} */
const nextConfig = {
async redirects() {
return [
{
source: '/products/:id',
destination: '/items/:id',
permanent: true,
},
];
},**텍스트**
}
module.exports = nextConfig;커스텀 404 페이지
존재하지 않는 주소로 들어올 경우에 Next.js에서는 기본적으로 404 페이지를 보여 줍니다. 내가 원하는 404 페이지를 보여주려면 pages/404.js 파일을 만들고 일반적인 페이지처럼 구현하면 됩니다.
커스텀 App
모든 페이지에 공통적으로 코드를 적용하고 싶다면 커스텀 App 컴포넌트를 수정하면 된다. pages/_app.js 파일에 있는 컴포넌트이다. 이 컴포넌트에 사이트 전체에서 보여 줄 컴포넌트나 전체적으로 적용할 리액트 컨텍스트를 적용할 수 있다. 그리고 사이트 전체에 적용할 CSS 파일도 여기서 임포트할 수 있다.
커스텀 App 컴포넌트의 Props는 Component와 pageProps가 있는데 우리가 만든 페이지들이 Component Prop으로 전달되고 여기에 내부적으로 필요한 Props는 pageProps라는 값으로 전달된다.
pages/_app.js
import Header from '@/components/Header';
import { ThemeProvider } from '@/lib/ThemeContext';
import '@/styles/globals.css';
export default function App({ Component, pageProps }) {
return (
<Header />
<Component {...pageProps} />
</ThemeProvider> );
}
커스텀 Document
pages/_document.js 파일에 있는 Document 컴포넌트는 HTML 코드의 뼈대를 수정하는 용도로 사용한다. 코드는 React 컴포넌트이지만 일반적인 컴포넌트처럼 동작하지는 않기 때문에 useState나 useEffect처럼 브라우저에서 실행이 필요한 기능들은 사용할 수 없다.
pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="ko">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
)
}