[ NextJS ] 기초, NextJS에서 경로를 만들고 라우팅하는 방법

들어가며..

다음의 강의를 보고 정리해서 작성한 내용입니다.

Next.js 시작하기 – 노마드 코더 Nomad Coders

 

 

NextJS는 기본적으로, app 폴더 안의 page라는 파일을 참조하는데 이 경로가 바로 http://host/ 가 된다.

• 파일 내부의 컴포넌트는 중요하지 않고, export default 된 컴포넌트를 사용한다.

정적 라우팅

NextJS에서는, 파일 시스템을 활용해서 url을 표현한다.

만약 http://host/store/food 라는 경로의 페이지를 만들고 싶은경우 최상위 폴더인 app 폴더 내부에, store, food라는 폴더를 만들어주고 page.tsx 파일을 만들어주면 해당 경로의 페이지가 만들어진다.

이때, 폴더에 page.tsx 가 없다면 이는 url 경로로써의 역할만을 수행하고 해당 페이지는 존재하지 않는 페이지로 인식된다.

• 따라서 요소들을 담는 등의 폴더역할도 수행할 수 있다.

not-found 페이지 라우팅

NextJS에는 특별한 page들이 존재하는데, 그 중하나가 바로 not-found.tsx 이다.

• https://nextjs.org/docs/app/getting-started/project-structure#routing-files docs에서, 다른 페이지들도 확인할 수 있다.

not-found.tsx를 우리가 app 폴더 내부에 만들어주면, NextJS는 존재하지 않는 페이지 즉, 404에러를 발생시키는 페이지에 대하여 not-found.tsx 컴포넌트를 활용해 html을 렌더링하여 사용자에게 전달해준다.

Hydration

NextJS는 기본적으로 서버에서 html을 렌더링한 후 클라이언트에게 반환한다.

• 따라서, 브라우저가 처음 응답을 받은 후 js를 읽고 화면을 렌더링할 필요가 없다.

동작과정

1. 클라이언트가 특정 url에 해당하는 페이지를 요청하면, NextJS는 HTML을 렌더링하여 사용자에게 제공한다.
   • 이는 동적으로 움직이지 않는 html이다. (EventListner 등이 존재하지 않는 상태)
2. 이후 브라우저에서 사용할 준비가 완료되면, hydration 과정을 통해서 eventListner와 같은 요소들이 추가되어, 동적으로 화면을 구성할 수 있다. (유저와의 상호작용이 가능해진다.)

즉, hydration은 정적인 HTML 페이지를 React Application으로 만들어주는 과정을 말한다.

Use Client 지시어

hydration 과정이 정적인 HTML을 React Application으로 만들어주는 과정이라고 했는데, 모든 페이지에서 이와같은 동작이 이루어지지는 않는다.

use client 지시어가 붙은 컴포넌트에 대해서 NextJS는 hydration 과정을 거친다.

use client 지시어의 의미는 해당 컴포넌트가 interactive하게 즉, React 처럼 앱 처럼 동작한다고 프레임워크에게 알려주는 것이다.

• 주의할 점은 use client가 붙은 컴포넌트들도 기본적으로 NextJS에서 즉, 백엔드 서버에서 렌더링된 후 클라이언트에게 전달되고 클라이언트에서 hydration 된다.

즉, 다음의 과정을 거친다.

1. NextJS는 모든 컴포넌트들을 서버에서 먼저 렌더링한다. (HTML)
2. use client가 붙은 컴포넌트들은 클라이언트에게 도착한 후, hydration 과정을 통해 react application처럼 동작한다.

따라서, 모든 컴포넌트들이 기본적으로 SSR, Server Side Rendering이다.

layout.tsx

NextJS에는 layout.tsx 라는 특별한 컴포넌트가 존재하는데, 모든 컴포넌트들에서 사용되어야 하는 컴포넌트들을 layout 컴포넌트에 작성함으로써 불필요한 중복 코드를 줄일 수 있다.

만약, http://host/about 이라는 페이지를 요청한다고 가정해보자.

1. 먼저 layout component의 default export 컴포넌트를 먼저 렌더링한다.
2. 그 후 url을 확인하고 about 컴포넌트(/app/about/page.tsx)를 렌더링한다.

<Layout>
	<About />
</Layout>

• 따라서 위와같은 형태가 된다.

이 layout.tsx는 폴더 디렉토리 마다, 존재할 수 있다.

만약 about 하위 디렉토리에만 렌더링할 레이아웃이 존재한다면, /app/about/layout.tsx 를 만들어 적용시키면, /about 하위 디렉토리의 페이지들에만 모두 적용된다.

NextJS는 최상위 폴더인 /app 부터 layout.tsx를 읽으면서 존재한다면 렌더링하고, 마지막으로 하위 페이지를 렌더링한다.

동적 라우팅

동적 라우팅이란, /store/product/123 처럼, url에 변수가 있는 것을 말한다.

• Spring Boot의 @PathVariable 과 동일한 개념이다.

NextJS는 이런 동적 라우팅에 대해서 [변수명] 을 사용한다.

• 앞에서 말했듯이 NextJS에서는 url 경로를 폴더 디렉토리를 통해 정의해준다고 했는데, 이 경우도 마찬가지로 [변수명] 의 이름을 가진 폴더를 만들어주면 NextJS는 이 디렉토리를 동적 라우팅으로 인식하여 404 NotFound를 응답하지 않는다.

export default function ProductDetail(props){
	cosole.log(props);
	return <div></div>
}

// console.log()
{
	params: {
		id : '123'
	},
	searchParams: {}
}

• [id] 라는 변수명을 가진 경로를 만들고, /store/product/123 이라는 경로로 들어가면, console.log()에 출력되는 것처럼 객체로 전달받을 수 있다.
• 만약 쿼리 파라미터가 존재한다면, searchParams 필드에, key : value 형태로 전달받을 수 있다.

export default function Movie({
	params: {id},
} : {
	params: {id: string};
}){
	return <div>{id}</div>
}

• 바로 사용하려면 위와같이 작성하여 추출하여 사용할 수 있다.