Next.js(넥스트제이에스)

쉬운 설명

AI에게 스터디 신청 사이트를 만들어 달라고 했더니 Next.js 프로젝트가 만들어질 수 있어요. React는 화면을 컴포넌트로 구성하는 데 쓰이고, Next.js는 페이지 주소와 레이아웃, 서버에서 실행할 기능 등을 함께 구성하게 해 줘요. 어떤 파일을 고칠지는 프로젝트의 라우터 방식과 폴더 구조를 먼저 봐야 해요. 여기서는 App Router를 쓰는 예를 들어요.

이런 상황에서 만나요

“스터디 소개 페이지를 /study 주소에 추가해 주세요”라고 요청했다고 해 볼게요. App Router 프로젝트에서는 app/study/page.tsx가 해당 주소의 페이지를 정의할 수 있어요.

app/
  study/
    page.tsx

export default function Page() {
  return <h1>AI 스터디 소개</h1>;
}

http://localhost:3000/study

폴더와 주소의 연결을 확인한 뒤 페이지 파일을 수정해요. 실제 앱에는 공통 레이아웃과 다른 구성 파일도 필요해요. 아래 파일만 만든다고 새로운 Next.js 프로젝트 전체가 준비되는 것은 아니에요.

헷갈리기 쉬운 점

Next.js에서는 모든 코드가 서버에서만 실행되나요?

아니에요. 서버에서 처리할 코드와 브라우저에서 동작할 코드를 함께 사용해요. App Router의 페이지와 레이아웃은 기본적으로 서버 컴포넌트이고, 상태나 클릭 이벤트 등이 필요한 부분에는 클라이언트 컴포넌트를 사용해요. 클라이언트 컴포넌트도 초기 HTML을 서버에서 미리 만들 수 있어요.

브라우저로 전달되는 코드와 데이터에 비밀 키를 넣지 않아요. window나 localStorage처럼 브라우저에만 있는 기능은 실제로 브라우저에서 실행되는 시점에 사용해야 해요. use client를 붙였다는 이유만으로 모든 코드가 서버에서 실행되지 않는다고 생각하면 안 돼요.

왜 알아야 할까요?

AI가 말한 파일을 찾고 어떤 주소에 영향을 주는지 확인할 수 있어요. 오류가 서버 로그에 나는지 브라우저에 나는지도 나누어 질문할 수 있어요.

참고 자료

• Next.js · 문서
• Next.js · 서버와 클라이언트 컴포넌트
• Next.js · 페이지와 레이아웃