<Link> 컴포넌트
`<Link>`는 Next.js에서 페이지 간의 빠르고 부드러운 전환을 제공하는 컴포넌트입니다.
HTML의 `<a>` 태그를 대신 사용하며, 페이지 전체를 새로고침하지 않도록 최적화합니다.
import Link from 'next/link';
export default function Page() {
return <Link href="/">홈페이지로 이동</Link>;
}
useRouter Hook
`useRouter`를 통해 URl 쿼리와 페이지 전환을 제어할 수 있습니다.
1) 쿼리 값 가져오기
Params 값 : 파일명 `[id].js`에 따라 동적으로 URL의 값을 참조합니다.
import { useRouter } from 'next/router';
export default function Product() {
const router = useRouter();
const id = router.query['id'];
return <>Product #{id} 페이지</>;
}
쿼리스트링 값 : `/search?q=티셔츠`와 같은 URL에서 `q` 값을 참조합니다.
import { useRouter } from 'next/router';
export default function Search() {
const router = useRouter();
const q = router.query['q'];
return <>{q} 검색 결과</>;
}
2) 페이지 이동
`router.push()`로 코드에서 페이지를 이동시킬 수 있습니다.
import { useState } from 'react';
import { useRouter } from 'next/router';
export default function SearchForm() {
const [value, setValue] = useState('');
const router = useRouter();
const handleSubmit = (e) => {
e.preventDefault();
router.push(value ? `/search?q=${value}` : '/');
};
return (
<form onSubmit={handleSubmit}>
<input value={value} onChange={(e) => setValue(e.target.value)} />
<button>검색</button>
</form>
);
}
리다이렉트
`next.config.js`에서 리다이렉트를 설정하여 특정 URL을 다른 URL로 자동 이동시킬 수 있습니다.
/** @type {import('next').NextConfig} */
const nextConfig = {
async redirects() {
return [
{
source: '/products/:id',
destination: '/items/:id',
permanent: true,
// true: 308 Permanent Redirect, false: 307 Temporary Redirect
},
];
},
};
module.exports = nextConfig;
커스텀 404 페이지
사용자가 존재하지 않는 페이지에 접근하면 기본 404 페이지 대신 커스텀 페이지를 보여줄 수 있습니다.
`pages/404.js`를 만들어서 구현합니다.
export default function Custom404() {
return <h1>페이지를 찾을 수 없습니다</h1>;
}
커스텀 App
사이트 전반에 적용할 공통 로직, 컴포넌트, 컨텍스트 등을 설정하려면 `pages/_app.js`를 수정합니다.
예: 전역 CSS 적용, 공통 헤더 추가
import Header from '@/components/Header';
import { ThemeProvider } from '@/lib/ThemeContext';
import '@/styles/globals.css';
export default function App({ Component, pageProps }) {
return (
<ThemeProvider>
<Header />
<Component {...pageProps} />
</ThemeProvider>
);
}
커스텀 Document
HTML 코드의 구조를 수정하려면 `/pages/_document.js`를 사용합니다.
브라우저에서 실행되는 함수(useEffect 등)는 사용할 수 없습니다.
import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="ko">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
'Front-End > Next' 카테고리의 다른 글
| [Next.js] Image 태그 (0) | 2024.11.25 |
|---|