[Next.js] 라우팅하기 (13이전/이후)

리액트에서는 react-router-dom 라이브러리를 통해 페이지간 라우팅을 구현하였다. 그렇다면 Next에서는 어떻게 루트를 설정할까?

💻 NextJs 13버전 이전

NextJs 13이전에는 pages폴더 안에 컴포넌트를 생성하면 자동으로 경로가 설정된다.

/.next
/pages
	ㄴ--index.js
    ㄴ--post.js

pages폴더안에 index와 post 컴포넌트가 있으면 별도의 라우팅 설정없이 /post라는 경로를 사용할 수있다.
❗ 경로는 컴포넌트 이름이 아닌 파일명 기준(나도헷갈림 ㅎ..)
❗ export default function을 해줄것 (default로 export안해주면 에러뜸)
❗ /pages 내의 파일명으로 자동라우팅해줄 때, 파일 내의 함수명은 파일명과 불일치해도 된다.
❌ index는 시작(home같은)파일이라 보면되므로 로컬호스트뒤에 /index로 붙이면 안된다.

💻 NextJs 13버전 이후

app router 도입

NextJS 13부터 pages폴더가 자동생성되지 않고 app폴더가 생성된다.
예시)
이전 버전: root/pages/about.js => /about
13부터: root/app/about/page.js => /about

❗ 기존 시작파일 index.js가 page.js로

💻 Link 사용

• component 폴더를 만들어 NavBar.js를 생성

<script>
	import Link from "next/link";
export default function NavBar() {
    return (
        // next에서 Link태그 자식으로 a태그 사용 X
        <nav>
            <Link href="/">Home</Link>
            <Link href="/about">about</Link>
        </nav>
    );
}
</script>

• pages/index.js

<script>
import NavBar from "../../component/NavBar";

export default function Home() {
    return (
        <div>
            <NavBar />
            <h1>HOME</h1>
        </div>
    );
}
</script>

• pages/about.js

<script>
	import NavBar from "../../component/NavBar";

export default function Post() {
    return (
        <div>
            <NavBar />
            <h1>ABOUT</h1>
        </div>
    );
}
</script>

next13이후로는 Link태그 자식요소로 a태그가 유효하지 않는다. 공식문헌을 참고해보자.

• Home

• about