[React / Next.js] 어플리케이션 라우팅(url 생성) 구조

Front End/REACT

5_Clock 2023. 10. 3. 17:42

1. 폴더 구조

react-next로 앱을 생성하게 되면 기본적으로 src/app 폴더가 생성된다.

해당 폴더에서 라우팅하고 싶은 url 경로명의 폴더를 생성해준 뒤에 page.jsx(page.tsx)를 생성해주면 해당 페이지로 라우팅이 된다.

다음처럼 src/app 폴더 하단에 test 폴더와 page.jsx 파일을 생성한 뒤에 간단한 페이지를 생성해주면,

localhost:[포트]/test로 접속을 해보면, Test라는 컴포넌트에 작성한 내용을 확인 할 수 있다.

React-next를 사용하게 되면 이전에 react만 사용했을때 처럼 복잡한 라우팅에 대한 코딩은 없어지게 된다.

728x90