| 파일 / 폴더 경로 | 핵심 역할 및 설명 | 비고 / 꿀팁 |
| src/app/layout.tsx | 애플리케이션의 최상위 공통 레이아웃. 헤더, 푸터, 네비게이션 등 전역 UI를 구성하며, <html>과 <body> 태그를 반드시 포함해야 합니다. |
SEO를 위한 전역 Metadata 설정도 주로 여기서 진행합니다. |
| src/app/page.tsx | 루트 경로(/)에 매핑되는 메인 페이지 컴포넌트이자 서비스의 첫 화면입니다. | |
| src/app/globals.css | 애플리케이션 전역 스타일시트. Tailwind CSS를 사용할 경우, 최상단에 Tailwind 디렉티브(@tailwind)가 import되는 곳입니다. |
layout.tsx에서 이 파일을 import하여 전역에 적용합니다. |
| src/app/error.tsx | 해당 라우트 세그먼트와 하위 페이지에서 에러가 발생했을 때 보여주는 공통 에러 핸들링 페이지입니다. 클라이언트 컴포넌트('use client')로 작성되어야 합니다. | |
| src/app/loading.tsx | 데이터를 불러오는 동안(서버 컴포넌트가 준비되는 동안) 보여주는 공통 로딩 UI입니다. React Suspense 기반으로 동작하여 사용자 경험(UX)을 크게 높여줍니다. | 일반 스피너보다 실제 화면과 유사한 스켈레톤(Skeleton) UI를 넣는 것이 UX에 유리함. |
| src/app/not-found.tsx | 존재하지 않는 URL로 접근했을 때(404 에러) 보여주는 커스텀 404 페이지입니다. | 데이터가 없을 때 코드에서 notFound() 함수를 호출하여 강제로 이 페이지를 띄울 수 있음. |
| next-env.d.ts | TypeScript가 Next.js의 고유 타입들을 인식하도록 돕는 자동 생성 타입 선언 파일입니다. | Next.js가 빌드 시 자동으로 관리하므로 수정하지 않는 것이 좋습니다. |
| next-config.ts | Next.js 전역 설정 파일. 이미지 도메인 허용 리스트, 리다이렉트/고유 주소 매핑(Rewrites), 환경 변수, 빌드 최적화 등을 설정합니다. |
최신 Next.js 버전에 따라 확장자가 다를 수 있습니다. |
| tsconfig.json | TypeScript 컴파일러 설정 파일. 절대 경로 지정(Absolute Paths, @/*), strict 모드 활성화, JS 허용 여부 등을 정의합니다. |
paths 설정을 통해 import ... from '@/components/...' 형태로 깔끔하게 경로를 쓸 수 있게 해줍니다. |
| postcss.config.mjs | Tailwind CSS나 Autoprefixer 같은 PostCSS 플러그인을 웹팩/터보팩 빌드 파이프라인에 연결해 주는 설정 파일입니다. | 스타일링 도구 자동화의 핵심 역할을 합니다. |
'FrontEnd > Next.js' 카테고리의 다른 글
| [ Next.js ] Server 컴포넌트 vs Client 컴포넌트 완벽 이해하기 (0) | 2026.06.24 |
|---|---|
| [Next.js] Could not create a project called... npm naming restrictions 에러 해결 (0) | 2026.06.24 |