[1편] Next.js 기본 환경 세팅

React와 Next.js 완전 기초 정리

안녕하세요.
이번 글에서는 제가 실제로 프로젝트를 진행하면서 헷갈렸던 React와 Next.js의 기본 개념을 공부하면서 느낀 대로 정리해봤습니다.

“create-next-app을 쓰면 무조건 Next.js인가요?”
“React 하면 무조건 Next.js인가요?”
“왜 App.jsx는 없고 page.tsx만 있나요?”

이런 질문이 한 번이라도 떠오른 적 있다면, 이 글이 도움이 될 것 같습니다.

---

1. create-next-app을 사용하면 무조건 Next.js인가요?

네, 맞습니다. create-next-app으로 만든 프로젝트는 무조건 Next.js 프로젝트입니다.

• create-react-app → React만 사용하는 프로젝트
• create-next-app → React + Next.js 프레임워크

핵심은 Next.js는 React 위에서 동작하는 프레임워크라는 점입니다.

즉,

• React → UI를 만드는 라이브러리
• Next.js → React를 더 잘 쓰도록 도와주는 도구 모음

비유하자면,
React는 엔진이고,
Next.js는 엔진 + 차체 + 내비게이션까지 포함된 완성차라고 보면 이해가 쉬웠습니다.

---

2. 그럼 React만 해도 되지 않나요?

이론적으로는 가능합니다. 하지만 실무에서는 거의 Next.js를 씁니다.

이유는 간단합니다. React만으로 구현하려면:

• 페이지 라우팅
• SEO(검색 엔진 최적화)
• 서버 렌더링
• 빌드/배포 자동화

모두 직접 구현해야 하는데, 비용이 너무 큽니다.
그래서 대부분의 회사에서는 React + Next.js 조합을 표준처럼 사용합니다.

---

3. Next.js가 대신 해주는 것

대표적인 기능은 다음과 같습니다.

• 파일 기반 라우팅
• 서버 사이드 렌더링(SSR)
• 코드 분할 자동 처리
• API 서버 기능 제공
• 빌드/배포 설정

결국, React 개발자가 직접 처리해야 했던 번거로운 작업을 Next.js가 대신 처리해주는 구조입니다.

---

4. app 폴더 구조는 무엇인가요?

Next.js 13 이후에는 App Router 구조를 사용합니다.

기본 구조 예시:

app/
 ├─ layout.tsx
 ├─ page.tsx
 ├─ globals.css

• page.tsx → 실제 페이지 내용
• layout.tsx → 모든 페이지를 감싸는 공통 레이아웃

쉽게 말하면, page는 내용이고 layout은 액자라고 생각하면 이해가 쉬웠습니다.

---

5. App.jsx는 왜 없고 page.tsx만 있나요?

기존 React 프로젝트에서는 App.jsx가 진입점이었지만,
Next.js App Router에서는 page.tsx가 페이지 역할을 하고, 폴더 구조로 라우팅을 자동 처리합니다.
그래서 App.jsx는 더 이상 필요 없습니다.

---

6. layout.tsx는 왜 필요한가요?

layout.tsx는 모든 페이지의 공통 틀을 담당합니다.

예를 들어:

• 헤더
• 푸터
• 사이드바

같은 요소들을 한 번만 정의하고 재사용할 수 있도록 도와줍니다.
덕분에 유지보수성과 확장성이 훨씬 좋아집니다.

---

7. 왜 jsx가 아니라 tsx인가요?

• JSX → JavaScript + HTML
• TSX → TypeScript + JSX

TypeScript를 쓰면 타입 오류를 미리 발견할 수 있고, 실무에서 발생하는 버그를 크게 줄일 수 있습니다.
그래서 최근 프로젝트에서는 tsx 사용이 사실상 기본입니다.

---

8. React를 import하지 않아도 되는 이유

과거에는 JSX를 사용하려면 다음 코드가 필수였습니다.

import React from "react";

하지만 최신 React(17 이상) + Next.js 환경에서는 필요하지 않습니다.
이유는 **“JSX Transform”**이라는 기능이 도입되어서, JSX 코드가 자동으로 React.createElement 호출로 변환되기 때문입니다.

즉, React를 직접 import하지 않아도 JSX가 정상적으로 동작하며, 에러도 아닙니다.

---

9. .mjs 파일은 무엇인가요?

.mjs는 JavaScript 모듈 파일입니다.
예를 들어 next.config.mjs는 Next.js의 동작 방식을 설정하는 파일입니다.
일반적으로는 직접 수정할 일이 거의 없으며, “설정 파일이구나” 정도로만 이해하면 충분합니다.

---

10. 최신 구조를 쓰면 취업에 불리하지 않나요?

결론: 전혀 불리하지 않습니다.

오히려 이런 평가를 받을 수 있습니다.

• 최신 React 및 Next.js 구조 이해
• 유지보수성과 SEO를 고려한 구조 선택

중소기업에서도 신규 프로젝트나 리뉴얼 프로젝트에서는 Next.js를 많이 씁니다.

면접에서는 이렇게 말하면 충분합니다.

“React 단독보다는 유지보수성과 SEO를 고려해 Next.js App Router 구조를 선택했습니다. React의 기본 개념은 동일하다고 생각합니다.”

---

마무리 정리

• create-next-app = Next.js 프로젝트
• Next.js는 React 기반 프레임워크
• App.jsx 대신 page.tsx 사용
• JSX 대신 TSX 사용
• React import는 필요 없음 (JSX Transform 덕분)
• 현재 구조는 실무 표준

처음에는 낯설 수 있지만, 이 구조가 오히려 실무에 가장 가까운 방식입니다.
앞으로 이 구조를 기준으로 프로젝트를 진행하며 익숙해지면 좋겠습니다.