인프런 커뮤니티 질문&답변

안녕하세요!

해결하셨다니 다행입니다.

Nuxt 4에서는 파일 기반 라우팅의 기본 위치가 app/pages/로 바뀌었습니다.

app.vue는 전역 레이아웃(프레임) 역할이라 <NuxtPage />로 “페이지를 끼워 넣을 자리”만 제공하고, 실제 라우트(/)를 만들려면 app/pages/index.vue 파일이 있어야 합니다.
직접 app/pages/index.vue를 생성해 해결하신 방법이 맞습니다!

참고용 예시는 아래와 같습니다.

app/app.vue 파일

<template>

<NuxtLayout>

<NuxtPage />

</NuxtLayout>

</template>

app/pages/index.vue 파일

<template>

<div>Index Page</div>

</template>

추가적으로 설명을 드리자면,

pages/(루트)도 호환되긴 하지만, Nuxt 4에서는 app/pages/ 사용을 권장합니다.

구조를 바꾼 뒤에는 개발 서버를 한번 재시작하세요.
(.nuxt 캐시가 남아 있으면 라우트 반영이 늦을 수 있어요.)

정리를 하면, app.vue = 틀(레이아웃), app/pages/** = 실제 페이지

잘 해결하셨습니다! 필요한 경우 다른 페이지도 app/pages/about.vue처럼 추가해 보세요.

자문자답이지만, Nuxt4 버전부터는 app 폴더 아래에 app.vue 가 생성이 되고, 다른 폴더들도 app 폴더 아래에 생성되는게 디폴트로 권장되는거 같네요..

공식문서상에도 app/pages/index.vue 로 나오네요..

일단, 위치를 app/pages/ 로 바꾸니 잘 나오네요.

https://nuxt.com/docs/4.x/guide/directory-structure/app/pages

(이 강의가 강의제목처럼 Nuxt3 버전 강의이기는 한데,

강의에서 npx nuxi@latest init nuxt-weather-app

으로 설치 명령어를 사용하니, 강의 명령어를 따라하다보니 현재 최신버전인 4버전대가 설치되어서 강의랑 프로젝트 구조가 달라지는거 같습니다..

latest 가 아닌 3버전의 마지막 버전을 지정해서 설치해야 할 거 같습니다ㅠㅠ)

안녕하세요, 인프런 AI 인턴입니다. 속터져님

현재 Nuxt.js 프로젝트에서 메인 페이지(Index Page)가 정상적으로 렌더링되지 않는 문제가 발생하고 있는 것 같습니다. 이 문제는 여러 원인으로 발생할 수 있으며, 몇 가지 해결 방법을 제시합니다.

1. app.vue 구조 확인:

   • app.vue 파일의 내용이 기본적으로 Nuxt의 레이아웃을 관리하는 구조로 되어있습니다. app.vue 내에 <NuxtPage />가 포함되어 있어야 페이지가 표시됩니다. 강의 구조와 다를 수 있으니, Nuxt의 기본 구조에 따라 작성되었는지 확인해 보세요.
     

2. 페이지 컴포넌트 설정 확인:

   • pages/index.vue 파일이 제대로 작성되어 있는지 확인해 보세요. 'index'라는 컴포넌트는 기본적으로 루트 URL(localhost:3000)에 대응되어야 합니다. Nuxt.js는 이 파일을 기본 엔트리 포인트로 사용합니다.
     

3. Nuxt 설정 파일 확인:

   • nuxt.config.ts에서 모듈, 플러그인, 빌드 관련 설정이 잘 되어 있는지 확인해 보세요. 특히 TypeScript나 파일 경로 설정과 관련된 섹션을 점검하세요.
     

4. 종속성 및 빌드 확인:

   • 사용 중인 Nuxt와 관련된 패키지 버전이 프로젝트에 적합하게 설치되어 있는지 확인하세요. 때때로 최신 버전이 기존 설정과 호환되지 않을 수 있습니다.
     
   • npm install이나 yarn install을 통해 종속성을 최신 상태로 업데이트하고, npm run dev로 프로젝트를 다시 빌드해 보세요.
     

5. 콘솔 및 네트워크 로그 확인:

   • 브라우저의 개발자 도구(DevTools)를 열고, 콘솔 및 네트워크 탭을 확인하여 오류나 경고가 발생하는지 체크하세요. 도움이 되는 힌트를 찾아볼 수 있습니다.
     

6. 기본 페이지 설정 확인:

   • app.vue에서 <NuxtLayout /> 및 <NuxtPage />를 적절하게 설정하고 있는지 확인하세요. 이 설정이 누락되면 페이지가 나타나지 않을 수 있습니다.
     

관련 문제에 대한 추가적인 솔루션은 이전 질문인 “6강에서 css가 안되서 진행이 안됩니다!!!”을 참고하실 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.