[Next.js] 라우팅

라우팅은 path(경로)에 따른 컨텐츠를 보여주는지를 결정하는것 이다.

<a href="/create">Create</a>를 클링하게 되면 http://localhost:3000/create로 이동하게 되는데, React의 경우 리엑트 라우터를 설치해 path에 따른 컨텐츠를 보여주는 방식을 사용한다.

그렇다면 Next.js의 라우팅은 어떤 방식일까.

Next.js 라우팅

<a href="/create">Create</a>의 경우 http://localhost:3000/create로 이동하게 되는데 /create를 만드는 방식은

/create와 같이 path와 동일한 이름의 폴더를 만들고, page.js를 만들면 된다.
그러면 layout.js파일과 결합하게 되는데, 만일 같은 폴더에 없다면, 상위폴더의 layout.js과 결합하게 된다.

같은 폴더에 layout.js가 있더라도, 그 컨텐츠들 또한 상위 폴더의 layout.js과 결합한다.

그러면 <a href="/read/1">css</a>같은 방식은 어떨까?

/read/1, /read/2...같은 경우는 위와 같은 방법을 사용하게 되면, 각각 하나씩의 폴더를 만들어야 한다.

이럴땐

이런 방식으로 /read뒤의 값을 id라고 지정해 read폴더 안에 [id]폴더를 만들면 된다.

저 뒤의 id를 꺼내 쓰는 방법은

이렇게 하면 된다.