본문 바로가기

라우팅2

[Next.js 13] 라우팅 기본 정리 (Routing fundamental) # Next.js 13의 라우팅 기본 모든 웹사이트의 뼈대는 사실상 여러 페이지로 구성된 라우팅 구조이다. 라우팅이란 구분된 경로를 통해 각 페이지에 접근하는 방식을 의미한다. 예를 들면, http://localhost:3000/board 의 /board 등, 브라우저 등에서 접속 가능한 경로 시스템이다. cf. 라우트/라우팅 용어 "라우트"는 사실 영어로는 Route이며, 일반적으로 "루트"로 읽고, "경로"를 의미한다. 하지만, Next.js 에서는 Route는 "라우트", Routing은 "라우팅", Router는 "라우터"으로 읽는듯하여 그대로 표기하였다. 즉, 라우트 === 루트(접속 경로) 와 같은 의미이다. # File-System Based Router Next.js 13은 `/app` 디.. 2023. 8. 23.
[Next.js] pages 라우팅 파일명, 컴포넌트 이름 작성 방법 Next.js 는 File System Routing 을 제공한다. 즉, pages 경로에 위치한 폴더 및 파일명 자체가 접속 경로로 라우팅된다. 1. pages/파일명.tsx : /파일명 접속 라우팅 2. pages/폴더/파일.tsx : /폴더/파일 접속 라우팅 3. pages/폴더/[쿼리].tsx : /폴더/모든경로 접속 다이나믹 라우팅. useRouter().query 로 경로 취득 * index.tsx 는 파일명을 제외한 / 경로로 인식. * 타입스트립트 확장자는 tsx, 자바스크립트 확장자는 js를 사용 그런데 라우팅되는 파일의 파일명과 컴포넌트 명은 달라도 상관없다. 이 글에서는 이에 대해 간략하게 정리한다. # pages 라우팅 파일명, 컴포넌트 이름 작성 방법 - pages 경로의 라우팅 .. 2022. 8. 21.