인프런 커뮤니티 질문&답변
작성한 질문수
일반적인 nextjs project architecture에 대하여..
작성
·
66
·
수정됨
0
안녕하세요.
강의 잘 들었습니다.
현재 시간이 별로 없어서
typescript
react
nextjs
코드 구현 부분쪽은 다봤네요.
해서 제가 궁금한 것은
일반적인 nextjs project architecture 입니다.
물론 유연하게 상황에 맞춰서 하는 게 최선이겠지만
입문자이다 보니 일반적인 형태를 알고
경험을 쌓으며 해당 부분 지식을 쌓고 싶은 마음입니다.
해서 입문점으로 일반적인 nextjs project architecture에 대하여 알고싶습니다.
감사합니다.
답변 2
0
안녕하세요, 인프런 AI 인턴입니다. YongIl Park님.
Next.js를 사용한 프로젝트 아키텍처에 대해 궁금하시군요. Next.js는 기본적으로 React를 기반으로 하며, 파일 기반의 라우팅 기능을 제공하여 프로젝트 구조가 비교적 직관적입니다. 다음은 일반적인 Next.js 프로젝트 아키텍처입니다:
/pages폴더:- 이 폴더는 Next.js의 핵심 중 하나로, 파일 기반 라우팅이 작동하는 곳입니다. 이 폴더 내의 각 파일이나 폴더는 각각의 페이지가 됩니다.
- 예를 들어,
/pages/about.js는yourdomain.com/about에 매핑됩니다.
- 이 폴더는 Next.js의 핵심 중 하나로, 파일 기반 라우팅이 작동하는 곳입니다. 이 폴더 내의 각 파일이나 폴더는 각각의 페이지가 됩니다.
/public폴더:- 정적 자산(이미지, 폰트 등)을 위한 공간입니다. 이 폴더의 내용은 기본적으로 서버 루트 경로에서 제공되므로
/public/images/logo.png는yourdomain.com/images/logo.png로 접근할 수 있습니다.
- 정적 자산(이미지, 폰트 등)을 위한 공간입니다. 이 폴더의 내용은 기본적으로 서버 루트 경로에서 제공되므로
/components폴더:- 페이지에서 재사용할 수 있는 React 컴포넌트를 포함합니다. 이 폴더는 Next.js 프로젝트에서 자주 사용되며, 컴포넌트를 통해 코드 재사용성과 유지 보수성을 높일 수 있습니다.
- 페이지에서 재사용할 수 있는 React 컴포넌트를 포함합니다. 이 폴더는 Next.js 프로젝트에서 자주 사용되며, 컴포넌트를 통해 코드 재사용성과 유지 보수성을 높일 수 있습니다.
/styles폴더:- CSS 파일들을 저장하는 데 사용됩니다. CSS 모듈, 스타일드 컴포넌트 등을 통해 스타일을 관리할 수 있습니다.
- CSS 파일들을 저장하는 데 사용됩니다. CSS 모듈, 스타일드 컴포넌트 등을 통해 스타일을 관리할 수 있습니다.
/utils또는/lib폴더:- 유틸리티 함수, API 호출 로직, 헬퍼 함수 등을 관리하는 파일을 저장할 수 있습니다.
- 유틸리티 함수, API 호출 로직, 헬퍼 함수 등을 관리하는 파일을 저장할 수 있습니다.
next.config.js:- Next.js 설정을 커스터마이징하기 위한 파일입니다. 다양한 플러그인이나 Webpack 설정 등을 이곳에서 조정할 수 있습니다.
- Next.js 설정을 커스터마이징하기 위한 파일입니다. 다양한 플러그인이나 Webpack 설정 등을 이곳에서 조정할 수 있습니다.
API Routes:
- Next.js에서는
/pages/api폴더 안에 API 엔드포인트를 작성할 수 있습니다. 이는 간단한 서버리스 API를 구축할 수 있는 기능을 제공합니다.
- Next.js에서는
다양한 예시와 프로젝트를 통해 경험을 쌓으면서 이러한 기본 구조를 기반으로 자신이 필요로 하는 아키텍처를 설계해나가실 수 있을 것입니다.
더 많은 정보가 필요하시면, 다음과 같이 유사한 질문 링크를 참조해 보세요:
- “Next.js 프로젝트 구조 및 설계”: Next.js 프로젝트를 설계하는 데 도움이 되는 다양한 방법과 팁들을 제공 받고자 할 때 도움이 되는 게시물입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
-1
안녕하세요 Yongll Park님 이정환입니다.
우선 말씀하시는 아키텍쳐가 시스템 전반을 아우르는 아키텍쳐인지, 아니면 Next.js 프로젝트 만의 폴더 구조와 같은 코드 수준의 아키텍쳐인지 궁금합니다. 이에 따라 답변의 방향이 크게 달라질 것 같아요
답글로 알려주시면 추가 답글 남기겠습니다.
페이지 라우터냐 앱 라우터냐에 따라 다릅니다.
페이지 라우터의 경우 보통 아래와 같이 설정합니다.
project/
├── pages/ # 라우팅 (파일 기반)
│ ├── _app.tsx # 전역 설정
│ ├── _document.tsx # HTML 문서 커스터마이징
│ ├── index.tsx # / 경로
│ ├── about.tsx # /about 경로
│ └── api/ # API 엔드포인트
│ └── hello.ts
│
├── components/ # 재사용 컴포넌트
├── styles/ # 스타일 파일
├── lib/ # 유틸리티, 헬퍼 함수
├── public/ # 정적 파일
└── types/ # 타입 정의앱 라우터의 경우 아래와 같이 설정합니다.
project/
├── app/ # 라우팅 (폴더 기반)
│ ├── layout.tsx # 루트 레이아웃
│ ├── page.tsx # / 경로
│ ├── about/
│ │ └── page.tsx # /about 경로
│ └── api/
│ └── hello/
│ └── route.ts
│
├── components/
├── lib/
├── public/
└── types/번외로 오늘날에는 FSD 등의 복잡한 구조를 다루기 위한 고 수준 프론트엔드 아키텍쳐도 유행중이니 참고해보시면 좋을 것 같습니다!
Next.js 프로젝트 만의 폴더 구조 입니다~