라우팅 시스템

• React에서 사용하는 React-Router 라이브러리는 클라이언트에서의 라우팅만 구현
  → 모든 페이지가 클라에서만 만들어지고 렌더링
• Next.js에서는 파일시스템 기반 페이지와 라우팅 사용

Pages/

• pages/ 디렉터리 안의 모든 파일은 곧 라우팅 규칙
  • index.js 로 저장된 페이지는 http://localhost:3000 접근 시 나타남
  • contacts.js는 http://localhost:3000/contacts 접근 시 나타남
• 계층적 구조 라우팅 규칙
  • pages/posts/ 안에 index.js 만들어서 반환
• 동적 라우팅 규칙
  • pages/posts/ 안에 [slug].js 파일 생성
  • [slug].js → 경로 매개변수로, 사용자가 주소창에 입력하는 값은 모두 가질 수 있음

경로 매개변수

1. 페이지에서 경로 매개변수 사용하기

export async function getServerSideProps({params}) {
	const { name } = parmas;
  return {
		props: {
			name,
		},
	};
}

fuction Greet(props) {
	return (
		<h1> Hello, {props.name}! </h1>
	);
}

→ http://localhost:3000/greet/mitch 주소로 가면 ‘Hello, mitch!’라는 문구 확인 가능

❗ getServerSideProps(), getStaticProps()는 반드시 객체를 반환하고, 사용할 때는 props 속성값 사용해야함

2. 컴포넌트에서 경로 매개변수

import { useRouter } from 'next/router';

function Greet() {
	const { query } = useRouter();
	return <h1>Hello {query.name}!</h1>;
}

export default Greet;

• http://localhost:3000/greet/mitch?name=Christine 으로 접근할 경우
  → 쿼리 매개변수보다 경로매개변수 우선이기 때문에 Hello, mitch 출력
  

3. 클라이언트 내비게이션

• Link 컴포넌트에서 href를 통해 네비게이션 처리 가능
• Next.js는 현재 화면에 표시되는 페이지에 있는 모든 Link 페이지를 미리 읽어옴
  → 비활성화 기능 preload={false}
  
  

4. 동적 경로 매개변수

<Link href='/blog/2021-01-01/happy-new-year'>Post</Link>

• ver 10부터

5. 복잡한 URL

<Link 
	ref={{
		pathname: '/blog/[date]/[slug]'
		query: {
			date: '2020-01-01',
			slug: 'happy-new-year',
			foo: 'bar'
		}
	}}
>
	Post
</Link>

위 링크 클릭시 http://localhost:3000/blog/2021-01-01/happy-new-year?foo=bar 로 연결

6. router.push 메서드

const router = useRouter();
useEffect(() => {
	router.push('/login');
}, [])

• useEffect에 의해 코드가 클라이언트에서만 실행됨
• Link 컴포넌트와 같이 객체를 전달해서 더 복잡한 URL로 이동 가능

_

출처: 실전에서 바로 쓰는 Next.js