Next.js 13에 AppDir 이라는 새로운 디렉토리 구조가 도입되었다. 학습용으로 임시 리포지토리를 만들었을 때는 굉장히 편했기에 그룹 프로젝트에도 이를 도입하려고 했으나 Styled-Component 에 문제가 발생하여 도입을 포기하게 되었다.

Next.js 13에 관한 nextjs 공식 블로그의 글은 아래 링크에서 확인할 수 있다: Blog - Next.js 13 | Next.js

Next.js 13의 기능들을 쉽게 설명해주는 영상

• https://www.youtube.com/watch?v=6aP9nyTcd44
• https://github.com/906bc906/practice/tree/nextjs/sonny-13-tutorial
  • 위의 영상을 보고 작성한 코드

Next.js 13 AppDir

기존 Next.js 는 어땠는데

Routing: Introduction | Next.js

기존 Next.js 는 pages directory 를 기반으로 라우팅했다.

아래 예시를 본다면 대강 무슨 느낌인지 이해가 될 것이다.

• pages/index.js → /
• pages/blog/index.js → /blog
• pages/blog/first-post.js → /blog/first-post
• pages/dashboard/settings/username.js → /dashboard/settings/username
• pages/blog/[slug].js → /blog/:slug (/blog/hello-world)
• pages/[username]/settings.js → /:username/settings (/foo/settings)
• pages/post/[...all].js → /post/* (/post/2020/id/title)

또한 pages/ 아래에 _app.js 와 _document.js 를 두어 페이지를 초기화하고 페이지 렌더링에 사용되는 html, body 태그를 업데이트하는 데 사용했다.