728x90
Next.js는 무엇인가
🏷️ 초기 로딩이 느리고 검색 엔진에 제공하는 정보가 적은 리액트의 단점을 커버한 프레임워크
- pre-rendering을 통해 미리 렌더링할 정보를 저장하거나 서버가 그때 그때 렌더링하여 화면을 출력한다.
- Vercel를 통한 서버 호스팅을 이용해 빠른 코드 배포가 가능하다.
- 파일 시스템 기반 라우팅을 통해 편하게 페이지를 나누고 개발이 가능하다.
어떻게 만들어야 할까?
🏷️ 생성 과정
npx create-next-app을 이용해 프로젝트를 생성한다.- 파일 정리 및 기초 세팅 후
npm run dev을 통해 개발자 모드를 열어 개발한다.
🔖 프로젝트 초기 구성
project
|- components
|- lib
|- pages
|- public
|- styles
eslintrc.json
jsconfig.json
next.config.js
...파일 시스템 기반 라우팅이란?
🏷️ 라우팅의 정의
- 어떤 주소에 어떤 컴포넌트나 페이지를 매칭하여 보여줄지 결정하는 것을 의미한다.
🔖 리액트와의 차이
- 리액트는 라우터를 이용해
path와element를 설정하여 컴포넌트를 매칭하여 보여준다. - 넥스트는 폴더와 파일을 만들면 그 구조가 곧 페이지의 주소로 이용된다. (파일 시스템 기반 라우팅)
🏷️ 파일 시스템 기반 라우팅 사용하기
- 각 폴더는 URL 세그먼트에 매핑되는 경로를 의미한다. (중첩되게 만들고 싶다면 폴더를 중첩하면 OK!)
- 경로를 공개적으로 보여지게 하고 싶다면 특수한
page.js파일 사용(.jsx, .tsx 모두 가능)
app
|- page.js
|- dashboard
|- page.js
|- settings
|- page.js
|- analytics- 기본적인 페이지 구성
export default function Page() {
return <h1>Hello, Next!</h1>;
}페이지 연결 및 탐색
🏷️ Link 사용
- HTML의 태그의 확장으로 경로 간 프리패치 및 클라이언트 탐색
import Link from "next/link";
export default function Page() {
return <Link href="/anotherPage">페이지 이동</Link>;
}🏷️ useRouter() 훅 사용
- 클라이언트 구성 요소 useRouter의 경로를 프로그래밍 방식으로 변경
import { useRouter } from "next/navigation";
export default function Page() {
const router = useRouter();
// query에서 id, q 등 다양한 쿼리 추출
const { id } = router.query;
const { q } = router.query;
return (
<div>
<button onClick={() => router.push("/{id}")}>id 이동</button>
</div>
);
}🏷️ 리다이렉트
- next.config를 이용해 특정 주소에 대해 리다이렉트할 주소를 설정 가능
/** @type {import('next').NextConfig} */
const nextConfig = {
async redirects() {
return [
{
source: "/products/:id",
destination: "/items/:id",
permanent: true,
},
];
},
};
module.exports = nextConfig;🏷️ 커스텀 404 페이지 및 App, document
커스텀 404페이지
- pages 폴더에 404.js를 만들어서 사용 및 커스텀 가능
커스텀 App
- 공통적으로 모든 페이지에 코드를 적용하고 싶을 때 사용(리액트의 react-router-dom outlet과 유사)
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의 뼈대를 수정하는 용도
- 일반적인 컴포넌트같은 동작을 할 수 없어 hook 등의 기능은 사용 불가
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="ko">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}'Front-End Study > Next.js' 카테고리의 다른 글
| 앱 라우터가 지향하는 파일 아키텍쳐 (4) | 2024.07.22 |
|---|---|
| 백엔드의 전유물인 API를 Next.js로 다룰 수 있다고?! (0) | 2024.06.03 |
| 공짜 렌더링 by Next.js (0) | 2024.05.31 |
