3. Next.js - Router

Next.js의 Router는 file-system 기반

폴더
1. pages/
2. src/pages/

File system은 pages 폴더 아래 있어야하며 1,2번 구조가 모두 존재한다면 1번이 우선순위를 가진다.

slug

하나의 파일로 다양한 값을 받아서 여러 파일을 대체할 수 있다.

[slug]

pages/category/[slug].js // /category/food
pages/[username]/[info].js // /hj/age

[...slug]

pages/cart/[...slug].js // /cart/*

[[...slug]]

pages / category / [[...slug]].js // /category -> ok!

옵셔널 slug로, 폴더아래 index.js를 지정해주지 않더라도 접근가능하다.

옵셔널 slug

• pages/cart/[...slug].js -> /cart 접근 시 404 error
• pages/cart/[[...slug]].js -> slug 없어도 접근 가능

useRouter

import { useRouter } from 'next/router';

const router = userRouter;
const { slug } = router.query;

query가 있는 경우

• pages/category/[slug].js
• url : /category/food?from=event

const { slug, from } = router;

console.log(slug); // food
console.log(from); // event

query에 slug가 있는 경우

• pages/category/[slug].js
• url : /category/food?slug=book

const { slug } = router;

console.log(slug); // food

pages 안의 [slug]가 우선시 된다. query의 slug는 무시된다.

다중 slug

• pages/[username]/[info].js
• url : /hj/age

const { username, info } = router;

console.log(username); // hj
console.log(info); // age

pages/cart/[...slug].js -> slug는 배열 형태

Routing 방법

<Link href={"url"} />
or
router.push("url")

Shallow Routing

getServerSideProps / getStaticProps등을 다시 실행시키지 않고, 현재 상태를 잃지 않은 상태로 url을 바꾸는법

대신 동일한 페이지에서 query만 바뀌는 경우에만 해당

• 상태는 유지하면서 URL만 바꾸고 싶은 경우
• 새로고침 해도 유지되는 장점
  url이 바뀌었다고 페이지가 처음부터 다시 렌더링 되거나, Data fetching이 다시 일어나는것은 비효율

url 을 바꾸는 3가지 방식

• location.replace("url")
• router.push(url);
• router.push(url, as, { shallow: true });

import Layout from 'components/Layout';
import SubLayout from 'components/SubLayout';
import { useRouter } from 'next/router';
import { useState } from 'react';

export async function getServerSideProps() {
	console.log('server');
	return {
		props: {}
	};
}

export default function MyInfo() {
	const router = useRouter();
	const [clicked, setClicked] = useState(false);
	const { status = 'initial' } = router.query;
	
    return (
		<>
			<h1>clicked : {String(clicked)}</h1>
			<h1>status : {status}</h1>
			<button
				onClick={() => {
					setClicked(true);
					location.replace('/settings/my/info?status=editing');
                    // 로컬 상태 유지 x, reRendering -> clicked : false, status: editing, 'server'
				}}
			>
				edit replace
			</button>
			<br />
			<button
				onClick={() => {
					setClicked(true);
					router.push('/settings/my/info?status=editing');
                    // 로컬 상태 유지, 서버 재호출 -> clicked : true, status: editing, 'server'
				}}
			>
				edit router push
			</button>
			<br />
			<button
				onClick={() => {
					setClicked(true);
					router.push('/settings/my/info?status=editing', undefined, { shallow: true });
				}}
                // 로컬 상태 유지, 서버 호출 x -> clicked : true, status: editing
			>
				edit router shallow
			</button>
		</>
	);
}