안녕하세요 오늘은 next.js을 실행해보고 파일기반 라우팅을 공부해보겠습니다!╰(°▽°)╯
목표
- next.js 실행해보기
- 파일기반 라우팅 vs 코드기반 라우팅 이해하기
- 중첩라우팅, 동적라우팅, 정적라우팅 이해하기
- Link ,router 이해하기
Next.js 실행하는법
react에서 cra을 하는것처럼 next도 먼저 설치를 해야합니다!
next : npx create-next-app (프로젝트이름)
next+ts : npx create-next-app@latest --typescript
설치가 된후 npm run dev을 입력해줍니다. localhost/3000번에 들어가셧을떄
이 페이지가 나온다면 기본적인 초기세팅이 되신겁니다!
파일기반 라우팅 vs 코드기반 라우팅
next.js는 파일경로를 기준으로 라우팅되는 파일기반 라우팅이고
react는 react-router-dom이라는 라이브러리를 따로 다운을 받아 코드를 작성한 후
거기에 맞는 url에 들어간다면 라우팅되는 코드기반 라우팅입니다.
파일기반 라우팅(next)은 따로 라우팅 코드를 작성하지 않기떄문에 코드의 양을 줄일 수 있습니다. 그리고 폴더 구조가 곧 경로이기때문에 가독성이 좋습니다.
하지만 강제적인 폴더구조를 요구하기떄문에 react의 자유로운 폴더구조를 좋아하는사람도 있습니다.
파일기반 라우팅: 코드를 줄일 수 있다 , 폴더구조가 곧 경로이며 가독성이 좋다, 파일의 구조가 강제적이다.
코드기반 라우팅 : 라우팅코드를 따로 작성해야한다, 폴더구조가 자유롭다.
정적라우팅, 동적라우팅, 중첩라우팅
정적라우팅
- pages/index.tsx
import type { NextPage } from "next"; import { Router, useRouter } from "next/router"; const Home: NextPage = () => { const router = useRouter(); return <div>여기는 시작페이지입니다!</div>; }; export default Home; - pages/about.tsx
import React from "react";
const about = () => {
return <div>여기의 경로는 /about입니다!</div>;
};
export default about;
결과
- localhost:3000
- localhost:3000/about
페이지의 경로에 따라 정적으로 라우팅이 가능합니다.
동적 라우팅
만약 굉장히많은 페이지 ex)온라인 스토어 상품, 블로그 게시글 등 을 정적페이지로 하나하나 파일을 만들면서 하면 굉장히 비효율적이겠죠?
그럴땐 동적 라우팅을 써야합니다.
동적 라우팅은 여러 종류의 데이터를 불러와야 하는 페이지를 생성할떄 쓰입니다.
현재 폴더 구조입니다. pages/port/[id]가 있는걸 알수있는데 만약 사용자가 pages/port/123에 접근한다면 router.query의 값에 123이 추가가 됩니다.
- pages/port/[id]
import { useRouter } from "next/router";
import React from "react";
const ThisIsId = () => {
let router = useRouter();
console.log(router.query);
console.log(router.pathname);
return <div>`여기는 port페이지안에 동적 페이지야</div>;
};
export default ThisIsId;
결과
- localhsot:3000/port/123
중첩 라우팅
중첩라우팅은 현재페이지에서 어떤 url이 붙어있어도 전부 동일한 파일에서 렌더링합니다.
pages/blog/[...id]로 페이지구조가 잡혀있는데
url이 localhost:3000/pages/blog/~ 라면 [...id].tsx가 렌더링되며 blog/~에 붙여있는 url의 값을 router.query에서 참조할 수 있습니다.
- pages/blog/[...id]
import { useRouter } from "next/router";
import React from "react";
const ThisIsBlog = () => {
let router = useRouter();
console.log(router.query);
console.log(router.pathname);
return <div>여기는 /blog/~ 가 들어갈곳이야</div>;
};
export default ThisIsBlog;
결과
- localhost:3000/blog/123/456
Link router
Next.js는 폴더경로에 따라 페이지가 이동되는데
지금까지 손으로 url을 바꿔주면서 페이지 이동을 했습니다.
사용자가 원하는 페이지를 쉽게 이동시킬 수 있게
link 와 router.push에 대해서 알아보겠습니다.
next 페이지가 렌더링될때 그 페이지가 있다면 페이지에 있는 link태그들의 html파일을 미리 fetching합니다. 그후 사용자가 link태그를 누른다면 js파일만 가져와서 부분적으로 렌더링합니다.
그렇기때문에 새로고침이 이루어지지않습니다.
- /pages/index.tsx
import type { NextPage } from "next";
import Link from "next/link";
import { Router, useRouter } from "next/router";
const Home: NextPage = () => {
const newsPage = [
{ id: "first-port", name: "First port" },
{ id: "second-port", name: "Second port" },
];
const router = useRouter();
return (
<div>
<ul>
{newsPage.map((page) => (
<li key={page.id}>
<Link
href={{
pathname: `/port/${page.id}`,
query: { port: page.id },
}}
>
{page.name}
</Link>
</li>
))}
</ul>
</div>
);
};
export default Home;
- pages/port/first-port
import { Router, useRouter } from "next/router";
import React from "react";
const ThisIsId = () => {
let router = useRouter();
console.log(router.query);
console.log(router.pathname);
function back() {
router.push("/");
}
return (
<>
<div>`여기는 port페이지안에 동적 페이지야</div>
<button onClick={back}>홈으로</button>
</>
);
};
export default ThisIsId;
router.push
router.push를 사용하면 원하는 경로로 이동할 수 있습니다.
link와 router.push 둘다 페이지 url을 바꿈으로써 다른 페이지를 보여주는것처럼 만들어주는 기능을 가지고 있습니다.
그렇다면 link와 router.push의 차이점은 무엇일까요?
link태그는 브라우저에서 렌더링과정을 거칠때 a태그로 변환됩니다 . 그렇기때문에 웹사이트가 크롤링되어 SEO에 유리합니다.
반면 router.push()는 location과 비슷하게 동작합니다.
location은 크롤링되지 않기때문에 SEO에 불리합니다.
그외의 router 문법
router.push
router.replace
router.prefetch
router.beforePopState
router.back
router.reload
router.events
404 커스터마이징하기
잘못된 경로에 들어간다면 next측에서
이 페이지를 띄우도록 설정해놨는데
404(꼭 404여야합니다) 파일을 만든후에
import React from "react";
const Notfind = () => {
return <div>잘못된 경로의 페이지입니다.</div>;
};
export default Notfind;
컴포넌트를 만들어주면 404페이지를 마음대로 변경할 수 있습니다.
결과
마치며
next의 파일기반라우팅에 대해서 알아봤습니다! ╰(°▽°)╯
