Next.js에서 제공하는 내장 라우팅 시스템이 무엇이고 어떤방식으로 사용하는지를 중점으로 정리 하였습니다.
\nNext.js에서 기본 내장 되어 있는 라우팅 시스템은 File-system 기반으로 정적 파일을 생성하여 동작합니다.
\nNext.js에서는 pages 폴더 아래 파일들이 라우팅 경로로 사용 됩니다.
\nIndex routes
\npages폴더 안에 index.js는 → / 경로를 표현합니다. 그렇다면 /blog를 표현하고 싶다면 어떻게 해야 할까요?
\n다음과 같이 pages/blog/index.js 표현 하면 됩니다.
Nested routes
\n중첩된 라우팅을 표현하고 싶다면 파일 구조를 중첩하여 사용하면 됩니다.
\nDynamic route segments
\n블로그 포스트를 에로 포스트 번호가 1번 2번 3번이 있다고 가정한다면\n각각 /blog/1post.js, /blog/2post.js, /blog/3_post.js 이런식으로 작성한다는 것은 매우 비효율적입니다.\n따라서 동적으로 라우팅 페이지를 구성하고 싶은 경우 아래와 같은 양식으로 파일을 작성해야 합니다.
\nNext.js 에서 페이지 간에 이동을 위해서는 next/router , next/link 를 사용 할 수 있습니다.
\nLink를 사용하는 기본적인 예시 입니다.
\nimport Link from 'next/link'\n\nfunction Home() {\n return (\n <ul>\n <li>\n <Link href=\"/\">Home</Link>\n </li>\n <li>\n <Link href=\"/about\">About Us</Link>\n </li>\n <li>\n <Link href=\"/blog/hello-world\">Blog Post</Link>\n </li>\n </ul>\n )\n}\n\nexport default HomeRouter를 사용하는 기본적인 예시 입니다.
\nimport { useRouter } from 'next/router'\n\nfunction ActiveLink({ children, href }) {\n const router = useRouter()\n const style = {\n marginRight: 10,\n color: router.asPath === href ? 'red' : 'black',\n }\n\n const handleClick = e => {\n e.preventDefault()\n router.push(href) // 페이지 이동\n }\n\n return (\n <a href={href} onClick={handleClick} style={style}>\n {children}\n </a>\n )\n}\n\nexport default ActiveLinkrouter.push를 사용해서 화면을 전환하는 경우는 javascript에서 window.location을 하는 경우와 비슷합니다.
Link를 사용해서 화면을 전환하는 경우는 <a> tag를 이용해서 화면을 전환 하는 경우와 비슷합니다. 다만 Next.js에서의 일반적인 <a> tag와는 다르게client-side 의 라우팅을 지원합니다.
여기서 확인되는 차이점은 <a> tag가 생성된다는 점 입니다.
즉 <a> tag 가 생성된다는 것은 SEO 최적화에 더 유리하다는 것을 의미합니다. (<a> tag에 링크를 크롤링 봇이 이동 할 수 있습니다.)
추가적으로 link는 data prefetch 기능을 제공하여 사용자의 화면에 link 태그가 보이게 되면 해당 링크에 연결된 페이지를 서버에 요청하여 prefetch 할 수 있습니다.\n미리 가져온 페이지가 존재하기 때문에 이동시 더욱 빠르게 이동 할 수 있습니다.