next 폴더 src 그리고 import alias

next를 설치하다 보니 src를 사용할 거니?

import alias를 사용할 거니? 하고 물어봤다

 

src에 담아서 개발을해? import alias는 '@/~' 을 사용한다고 ? 당연하지 라고 생각을 했어요

 

그럼 왜 당연할까요? 또 import alias는 기본 no로 되어 있어요

 

뭐 관리가 쉬워지고 import 코드가 깔끔해져서 그러긴 한데요 좀더 찾아봤어요 

 

src/ 디렉토리를 사용하는 장점

1. 프로젝트 구조의 명확성
   • 모든 소스 코드 파일을 src/ 디렉토리 아래로 정리하여 루트 디렉토리가 깔끔해집니다.
   • 루트 디렉토리에는 설정 파일(예: package.json, next.config.js)만 남고, 소스 코드와 명확히 분리됩니다.
2. 대규모 프로젝트 관리
   • 프로젝트가 커질수록 디렉토리가 많아지는데, src/ 디렉토리를 사용하면 구조적인 명확성을 유지할 수 있습니다.
3. 모듈화된 파일 관리
   • src/ 아래에 pages/, components/, utils/, api/ 등을 세분화하여 각 역할에 맞는 파일을 쉽게 찾을 수 있습니다.

project-root/
├── public/                # 정적 파일
├── src/                   # 소스 코드
│   ├── pages/             # Next.js의 라우팅 파일
│   ├── components/        # 재사용 가능한 컴포넌트
│   ├── styles/            # 전역 및 모듈 CSS
│   ├── hooks/             # 커스텀 React Hook
│   ├── utils/             # 유틸리티 함수
│   ├── context/           # React Context API 파일
│   └── api/               # API 호출 로직
├── .eslintrc.json         # ESLint 설정 파일
├── next.config.js         # Next.js 설정 파일
├── package.json           # npm 의존성 관리
└── README.md              # 프로젝트 설명

 

Import Alias란?

Import Alias는 상대 경로 대신 짧고 명확한 경로를 사용하여 파일을 가져올 수 있도록 설정하는 것입니다.

예시: Import Alias 없이

import Header from "../../components/Header"; 
import Footer from "../../components/shared/Footer";

예시: Import Alias 사용

javascript

코드 복사

import Header from "@/components/Header"; 
import Footer from "@/components/shared/Footer";

 

여기서 **@/**는 프로젝트의 루트 디렉토리를 의미하는 import alias입니다.

 

물론 alias를 사용할 때 문제점은 클릭해 해당 코드로 넘어가지지 않는 다는 건데요 

alias를 세팅하고 우선 '../..' 를 사용해도 괜찮아요 

이후 '@/~' 하면 되니까요