최대 1 분 소요

작업 환경 : Mac OS 🧑🏻‍💻 언어 : Typescript

🖥 Next.js 관련 지난 글 보기

안녕하세요. Nerd Lee 입니다.

이번 글은 next.js의 url 구조에 대해서 알아보겠습니다.

NEXT.JS url 구조Permalink

1. react.js의 url 생성 방법Permalink

react.js의 url path 지정 방법

  • react.js는, react-router-dom을 설치하고 BrowserRouter로 감싸고, Switch 컴포넌트를 감싼 뒤, Route 컴포넌트를 이용해서, 각 컴포넌트(페이지)를 자식으로 둬야 합니다. 밑에 코드처럼 말이죠.
return (
<BrowserRouter>
<Switch>
<Route path="test">
<Test />
</Route>
</Switch>
</BrowserRouter>
)
view raw router.tsx hosted with ❤ by GitHub

2. next.js는 더 쉽다!Permalink

next.js의 url path 지정 방법

  • 이전 글에서 보시면 아시겠지만 pages 폴더가 있습니다. 그 폴더의 파일 이름이 url 주소가 됩니다. 하지만, 프레임워크인 만큼 next.js만의 룰이 있는데요. _app.tsx와 index.tsx 만큼은 가지고 있어야 합니다. index.tsx가 localhost:3000/ 이기 때문입니다.

예 ) 만약에 localhost:3000/test 를 만들고 싶다면?

> pages
> api
> hello.tsx
> _app.tsx
> index.tsx
> test.tsx
view raw gistfile1.txt hosted with ❤ by GitHub

예 ) localhost:3000/coin/price를 만들고 싶다면?

> pages
> api
> hello.tsx
> _app.tsx
> index.tsx
> coin
> price
view raw gistfile1.txt hosted with ❤ by GitHub
  • 이렇게 파일 구조를 가지게 되면, 쉽게 url 구조를 만들 수 있습니다.


이 글이 도움이 되셨다면 댓글 부탁드립니다^^
다음 글로 찾아오겠습니다!

참고