NextJS에서 기본 슬롯 파일

이전 강의에서 우리는 info라는 이름의 동적 슬롯을 만들었습니다:

app/layout.jsxexport default function RootLayout({children, info}) {
  return (
    <html lang="en">
      <body>
        <header>
          <div>
            {info}
          </div>
        </header>
        <main>
          {children}
        </main>
        <footer>
          footer
        </footer>
      </body>
    </html>
  );
}

그러나 문제가 있습니다. 우리의 슬롯은 두 가지 유형의 주소에서만 작동한다는 점입니다: /users와 /posts. 주소 표시줄에 슬롯이 정의되지 않은 다른 주소를 입력하면 NextJS는 404 오류를 발생시킵니다.

이 문제를 해결하려면 슬롯 폴더에 default.jsx라는 특수 파일을 직접 넣어야 합니다. 이 파일에는 주소 표시줄에 슬롯에 대해 지정되지 않은 URL이 입력되었을 때 표시될 컴포넌트가 있어야 합니다.

즉, 우리의 경우 파일 구조는 다음과 같습니다:

• /app//@info/default.jsx/users/page.jsx/posts/page.jsx