Next.js란 무엇인가요? 앱 제작자를 위한 쉬운 설명 가이드

Next.js는 React로 웹사이트와 웹 앱을 만들기 위한 프레임워크입니다. React는 버튼, 폼, 목록 같은 인터페이스의 구성 블록을 제공합니다. Next.js는 그 주변의 나머지 웹사이트를 더해 줍니다. 페이지와 URL, 준비된 상태로 도착하도록 서버에서 페이지를 렌더링하는 것, 데이터를 불러오는 것, 같은 프로젝트에서 백엔드 코드를 실행하는 것이 포함됩니다. 오픈 소스이며, Vercel이라는 회사가 만들었고, React 사이트를 만드는 가장 널리 쓰이는 방법 중 하나입니다.

AI로 만들 때 Next.js가 중요한 이유

AI 빌더에 앱을 설명하면, 빌더는 기술적 기반을 골라야 합니다. 그 선택은 나중에 여러분이 신경 쓰게 될 것들을 결정합니다.

• 검색 노출. Google에서 순위가 올라가야 하는 공개 사이트라면 실제 HTML을 보내는 것이 유리하며, Next.js가 이를 잘합니다.
• 백엔드가 있는 곳. Next.js를 쓰면 프런트엔드 페이지와 서버 코드("이 폼 저장" 또는 "결제 API 호출" 같은 것)를 한 프로젝트에 둘 수 있습니다.
• 호스팅. 서버 기능이 있는 Next.js 앱은 실행할 서버가 필요하지만, 일반 Vite 앱은 정적 파일로 제공할 수 있습니다.

Mythex는 새 프로젝트를 기본적으로 Vite + React + TypeScript + Tailwind로 시작하고, 요청하면 Next.js를 사용합니다. 첫 프롬프트에 "Next.js를 사용해 줘"라고 쓰면 충분합니다(기술 선택 방식). 그래서 언제 이를 요청할 가치가 있는지 아는 것이 도움이 됩니다.

일상적인 비유

React가 고품질 레고 블록 상자라면, Next.js는 설명서, 바닥판, 문과 배관 부품까지 이미 들어 있는 레고 세트와 같습니다.

같은 집을 낱개 블록으로도 지을 수 있습니다. 다만 방들을 어떻게 연결할지, 현관문을 어디에 둘지, 물을 어떻게 들일지 직접 정해야 합니다. Next.js는 이런 결정을 표준 방식으로 대신 내려 주므로, 모든 Next.js 프로젝트가 비슷한 구조를 갖고, 새 개발자(또는 AI)가 빠르게 길을 찾을 수 있습니다.

Next.js가 React에 더하는 것

Next.js에는 페이지를 구성하는 방식이 두 가지 있습니다. App Router(app/ 폴더)는 더 새로운 방식이며 서버 컴포넌트를 지원합니다. Pages Router(pages/ 폴더)는 원래 방식으로 여전히 지원됩니다. 새 프로젝트는 보통 App Router를 사용합니다. AI 빌더의 코드나 튜토리얼이 낯설게 느껴진다면 이 때문일 때가 많습니다.

실제 예시: 동네 카페의 공개 디렉터리

도시의 카페들을 나열하는 사이트를 상상해 보세요. 카페마다 페이지가 하나씩 있고, 검색 결과에 나타나게 하고 싶습니다.

카페 한 곳에 대한 Next.js 페이지는 대략 다음과 같을 수 있습니다.

// app/cafes/[slug]/page.tsx  →  /cafes/blue-door, /cafes/hilltop ...
export default async function CafePage({ params }) {
  const { slug } = await params;
  const cafe = await db.cafe.findUnique({ where: { slug } });
  return (
    <main>
      <h1>{cafe.name}</h1>
      <p>{cafe.address}</p>
    </main>
  );
}

누군가(또는 Google)가 /cafes/blue-door를 방문하면 다음이 일어납니다.

1. Next.js가 URL을 해당 파일과 맞춥니다. [slug] 폴더는 "어떤 카페든"을 뜻합니다.
2. 컴포넌트가 서버에서 실행되어 데이터베이스에서 카페 정보를 읽고 HTML을 만듭니다.
3. 브라우저는 카페의 이름과 주소가 이미 들어 있는 완전한 페이지를 받습니다. 데이터를 가져오기 위해 자바스크립트를 기다릴 필요가 없습니다.

순수한 클라이언트 측 React 앱이라면 브라우저는 먼저 거의 빈 페이지를 받고, 그다음 자바스크립트를 내려받고, 카페 정보를 가져와서 보여 줍니다. 검색 엔진은 이를 처리할 수 있는 경우가 많지만, 완전한 형태의 페이지가 더 믿을 만합니다. AI로 만든 웹사이트를 위한 SEO를 참고하세요.

이를 로그인 뒤에 있는 직원 전용 대시보드와 비교해 보세요. 검색 엔진은 어차피 그것을 볼 수 없으므로 서버 렌더링의 이점이 적고, 더 단순한 Vite 앱이 대개 더 잘 맞습니다.

핵심 용어

흔한 오해

• "Next.js가 React를 대체한다." 그렇지 않습니다. Next.js는 React를 사용합니다. 여러분의 컴포넌트는 여전히 React 컴포넌트입니다.
• "Next.js가 항상 더 좋은 선택이다." 기능이 더 많지만, 이해해야 할 것도 더 많습니다. 서버 렌더링, 캐싱, 서버 코드와 클라이언트 코드의 차이는 헷갈리는 버그의 흔한 원인입니다. 대부분 로그인 뒤에 있는 앱이라면 일반 React 앱이 더 단순한 경우가 많습니다.
• "Next.js는 Vercel에서만 실행된다." 오픈 소스이며, 모든 Node.js 서버나 Docker 컨테이너에서 실행할 수 있습니다. 서버 기능을 쓰지 않는다면 완전한 정적 내보내기도 가능합니다.
• "Next.js를 쓰면 SEO가 보장된다." 읽을 수 있는 페이지를 만들기 쉽게 해 줄 뿐입니다. 순위는 여전히 제목, 콘텐츠, 속도, 링크에 달려 있습니다.
• "Next.js의 서버 코드는 자동으로 비공개다." 클라이언트용으로 표시된 코드는 브라우저에 그대로 전달됩니다. 비밀 정보는 서버 전용 코드와 환경 변수에 머물러야 합니다.

AI 빌더에 요청하면 좋은 것

• "App Router를 사용하는 Next.js로 만들어 줘." — 원한다면 첫 프롬프트에 포함하세요.
• "어떤 페이지가 서버에서 렌더링되고, 어떤 페이지가 정적이며, 어떤 페이지가 브라우저에서 실행되는지, 그리고 왜 그런지 알려 줘."
• "공개 마케팅 페이지와 목록 페이지는 적절한 제목과 설명을 갖춘 서버 렌더링 또는 정적 페이지로 만들어 줘."
• "API 키는 서버 전용 코드와 환경 변수에만 두어 줘. 각 키가 어디서 읽히는지 보여 줘."
• "이 앱에 Next.js가 필요한가, 아니면 우리가 만드는 것에는 Vite + React 앱이 더 단순한가?"

Mythex의 Next.js

Mythex는 기본적으로 Vite + React + TypeScript + Tailwind를 사용하며, 프롬프트에서 요청하면 Next.js로 전환합니다. 처음부터 이름을 밝히면 나중에 바꾸는 것보다 크레딧을 아낄 수 있습니다. 라이브 미리보기에서 앱을 확인할 수 있고, 게시하면 호스팅을 직접 설정하지 않아도 라이브 URL로 배포됩니다. Mythex 문서에 따르면 클라이언트 렌더링 방식의 싱글 페이지 앱은 서버 렌더링이나 정적 HTML보다 SEO가 약하므로, 검색이 중요한 마케팅 사이트라면 처음부터 이를 알려 주는 것이 좋습니다(앱의 SEO).

자주 묻는 질문