소개
next에 대한 내용들을 정리하는 글
next란?
react로 만드는 서버사이드 rendering 프레임워크
프레임워크와 라이브러리의 차이점
라이브러리 : 사용자가 파일 이름이나 구조 등을 정하고, 모든 결정을 내림
프레임워크 : 파일 이름이나 구조등을 정해진 규칙에 따라 만들고 따름
1
2
3
내가 만들지 않은 코드를 "가지고 와서" 내가 무언가 Customize를 하고 있다면 👉 LIbrary.
내가 약속된 특정 영역에 코드를 짜니까, 그 코드를 "가지고 가서" 알아서 뭔가 뚝딱 만들어준다면? 👉 Framework.
route 결정 기준
pages폴더 안에 있는 파일명에 따라 route가 결정된다. [index.js 제외]
_App.js
Next는 App 컴포넌트를 사용하여 페이지를 초기화한다.
최 상단 컴포넌트다.
서버 사이드 렌더링(SSR)
클라이언트 렌더링과 다르게 서버 사이드 렌더링을 한 페이지의 소스를 보면 html 코드가 있다.
유저들은 데이터 로딩전에
html는 미리 볼 수 있다!
프로젝트 생성
1
2
3
npx create-next-app@latest myProject
cd myProject
npm run dev
<Link>
<Link>태그를 사용하면 url를 활용해 화면 전환이 가능하다.
- useRouter()
- 앱의 함수 컴포넌트에서
router객체 내부에 접근하기위해 사용하는 라이브러리
- 앱의 함수 컴포넌트에서
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Link from "next/link";
import { useRouter } from "next/router";
export default function NavBar() {
const router = useRouter();
return (
<nav>
<Link href="/">
<a style=>Home</a>
</Link>
<Link href="/about">
<a style=>
About
</a>
</Link>
</nav>
);
}
## next/head react-helmet 역할을 간편하게 해주는 next/head 라이브러리
1
2
3
4
5
6
7
8
9
10
//defaultHead.js
import Head from "next/head";
export default function defaultHead({ title }) {
return (
<Head>
<title>{title} | Next Movies</title>
</Head>
);
}
1
2
3
4
5
6
7
8
9
10
11
// Home.js
import defaultHead from "../components/defaultHead";
export default function Home() {
return (
<div>
<defaultHead title="Home" />
<h1 className="active">Hello</h1>
</div>
);
}
redirects
source 페이지로 이동했을 경우, destination 페이지로 전환시킨다.
변경을 위해서는 next.config.js의 코드를 변경해야한다.
- source
- 들어오는 request 경로 패턴
- destination
- 라우팅하려는 경로
- permanent
- true : 클라이언트와 검색 엔진에 redirect를 영구적으로 캐시하도록 지시
- false : 일시적이고 캐시하지 않도록 지시
1
2
3
4
5
6
7
8
9
10
11
12
//next.config.js
const nextConfig = {
async redirects() {
return [
{
source : "/register",
destination : "/register/info/id",
permanent: false,
},
];
}
}
rewrites
들어오는 경로를 다른 destination 경로로 매핑한다.
1
2
3
Rewrites은 URL 프록시 역할을 하고 destination 경로를 mask하여 사용자가 사이트에서 위치를 변경하지 않은 것처럼 보이게 합니다.
반대로 redirects은 새 페이지로 reroute되고 URL 변경 사항을 표시합니다.
아래 코드는 fetch api 주소를 유저에게는 /api/market이라는 주소처럼 보이게한 것 입니다. (실제 api 주소는 아닙니다)
1
2
3
4
5
6
7
8
9
//next.config.js
async rewrites() {
return [
{
source: "/api/market",
destination: `https://api.homeple.org/Daegu`,
},
];
}