Next.js는 페이지 라우터와 앱 라우터, 두가지의 라우터를 제공한다.
페이지 라우터는 Next 초창기부터 제공되어 오던 구 버전의 라우터이고,
앱 라우터는 Next13버전과 함께 2023년 처음 공개된 신규 라우터이다. 앱 라우터는 페이지 라우터의 단점을 보완하기 위한 서버 컴포넌트나 스트림이나 서버 액션등의 새로운 기능이 포함되어 있고 아직은 과도기를 겪고 있다.
그래서 페이지 라우터란, 현재 많은 기업에서 사용되고 있는 안정적인 라우터로 react router처럼 특정 조건을 기준으로 웹 서비스의 페이지를 분할하고 그 페이지 간의 이동을 제공하는 기능이다.
이름에 걸맞게 pages라는 폴더를 기준으로 라우팅한다.
pages
ㄴ index.js <- 브라우저에서 ~/ 로 접속 요청을 보내면 Index.js파일이 페이지로써 렌더링 되고
ㄴ about.js <- ~/about으로 접속 요청을 보내면 about.js파일에 작성된 컴포넌트가 페이지로써 렌더링 되며,
ㄴ item.js <- ~/item으로 접속 요청을 보내면 item.js 파일에 작성된 컴포넌트가 페이지로써 렌더링된다.
next는 파일명 기반으로 페이지를 자동으로 라우팅 해주는데,
당연하게도, 파일 이름뿐 아니라 폴더 이름으로도 라우팅이 가능하다.
pages
ㄴ about
ㄴ index.js <-이 구조에서도 ~/about로 접속 요청을 보내면, about.js라는 파일이 없으니 about 폴더 아래의 index.js가 렌더링된다.
동적 경로(Dynamic Routes) : 특정 아이템을 나타내는 id처럼 값이 변하는 요소를 URL에 포함하는 경우
: ~/item/1 , ~/item/2, ... , ~/item/100처럼 동적 경로를 갖는 페이지에 대해서도 라우팅도 간단하게 설정이 가능하다.
그냥 파일 명을 [id].js 처럼 대괄호를 넣어주면 된다.
그리고 이제 본격적인 실습을 위해,
실습 코드를 담은 새 폴더를 만들어 주었다.
vscode에서 open 후 터미널에
npx create-next-app@14 {프로젝트명}명령어를 통해 next app을 생성해준다. npx는 node package executor로 npmjs.com의 최신버전 노드를 다운로드 없이 실행시키는 명령어다. 페이지 라우터 섹션에서는 nextjs 14버전을 이용한다. (세감도 14버전 사용중이다)
그러면 이렇게 app에 대한 설정을 해줘야 하는데,
- app router를 사용할거냐고 묻는 질문엔 no에 엔터를 친다. (페이지 라우터 실습할거니까)
- import alias는 다른 모듈을 불러올때 절대경로를 사용해서 불러올 수 있게 하는 기능을 말한다.
ex) import A from "@/components/~" (@는 /src 경로를 의미함)
next app 생성이 완료되면, 터미널(cmd+j)을 열어주고
npm run dev명령어를 사용하면 개발모드로 next app이 실행된다.
다음으로, next app 생성시 기본적으로 생성되는 파일에 대해 알아보자.
next도 어쨋든 기본적으로 node js 패키지기 때문에 기본적으로 의존성을 보관하는 node_modules폴더나 패키지 정보를 저장하는 package.json 파일이 생성된다.
public 폴더 아래에는 페이지 내부에서 사용할 이미지 같은 정적인 파일들이 보관된다.
src 폴더 아래에는 pages>api 폴더가 있어, 페이지의 역할을 할 컴포넌트들을 경로에 맞게 보관할 수 있고,
styles 폴더는 컴포넌트나 앱의 전체적인 스타일을 담당하는 css가 위치한다.
pages 폴더 하위에 _app.tsx나 _documents.tsx라는 파일들은 페이지의 역할을 하는 파일은 아니고 next의 모든 페이지에 적용될 로직이나, 레이아웃 등을 담은 파일이다. _app.tsx 파일 열어보면 모든 페이지 역할을 하는 컴포넌트들의 부모 컴포넌트의 역할을 함을 알 수 있다.
app 컴포넌트
import "@/styles/globals.css";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
// component=현재 페이지 역할을 할 컴포넌트를 받음
// pageProps=component에 전달될 페이지의 props들의 객체를 보관하는 것
return <Component {...pageProps} />; //구조분해할당
}그래서 모든 페이지에서 공통적으로 필요한 헤더 같은 것들은 app 컴포넌트의 return 부분에 작성해주면 된다.
document 컴포넌트
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
//모든 페이지에 적용되어야 할 html 코드를 담은 컴포넌트
//기존 리엑트의 index.html과 거의 비슷한 기능
<Html lang="en">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}모든 페이지에 적용되어야 할 메타태그 설정이나, 폰트 불러오기, 서드파티스크립트 넣기 등에 사용한다.
next.config.mjs파일은 next 설정 관리하는 파일인데, 실습에서는 reactStrictMode : false로 꺼준다.
index.tsx 파일에 들어가면 페이지 역할을 하는 Home 컴포넌트가 있는데 저기 h1 태그로 작성하면 localhost:3000에서 작성한 대로 잘 추가되는 것을 볼 수 있다.
'FE > Next.js' 카테고리의 다른 글
| [ Next.js ] 실습용 백엔드 서버 세팅하기 (0) | 2025.01.26 |
|---|---|
| [ Next.js ] 사전 렌더링 이해하기 (1) | 2025.01.26 |
