Nuxt 3까지는 프로젝트 루트 공간에 모든 소스 폴더가 혼재되어 있었습니다. Nuxt 4에서는 소스 코드의 경계를 명확히 하기 위해 프론트엔드 관련 파일은 app/ 디렉토리 내부로 분리하고, 서버 관련 파일은 server/로 완전히 나누는 혁신적인 구조 변경을 단행했습니다.
Nuxt 4 디렉토리의 핵심 변경점
app/ 디렉토리 도입: 프론트엔드 코드(components, pages, layouts 등)가 모두 이 폴더 아래로 이동했습니다. 더 이상 루트 폴더가 혼잡해지지 않습니다.
server/ 와의 완벽한 분리: 풀스택 프레임워크인 만큼 server/ 폴더에서 API 라우트를 만들 수 있는데, 이제 클라이언트 코드(app/)와 서버 코드가 물리적으로 깔끔하게 분리되었습니다.
public/ 디렉토리: 정적 파일(이미지, 폰트 등)을 담는 곳으로, 루트 경로부터 바로 접근 가능한 에셋들만 보관합니다.
<template>
<!--
Nuxt 4에서는 src/app.vue 나 루트의 app.vue 가 아닌,
'app/app.vue' 가 최상단 메인 파일이 됩니다.
-->
<div>
<!-- 전역적으로 적용될 공통 요소를 여기에 넣을 수 있습니다. -->
<NuxtRouteAnnouncer />
<!--
<NuxtLayout>은 app/layouts 폴더의 공통 껍데기를 적용합니다.
<NuxtPage>는 app/pages 폴더의 개별 화면을 끼워 넣습니다.
-->
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
</template>
