Next.js 입문기 - 초보자가 직접 따라하며 배운 실습 기록 ( 1 )

안녕하세요! 최근 React 기반의 프레임워크인 Next.js를 공부하기 시작했는데요, 이 글은 제가 처음으로 Next.js 프로젝트를 설치하고 라우팅을 실습하며 배운 과정을 정리한 내용입니다. React는 조금 써봤지만 Next.js는 처음이라 막막했는데, 따라하면서 핵심 개념을 꽤 쉽게 이해할 수 있었어요.

1. 개발 환경 소개

• 운영체제: macOS
• 에디터: VS Code
• Node.js: 16.16.0 → (Next.js 실행을 위해) v20.0.0으로 업그레이드
• npm: 8.11.0
• nvm 사용: O (Node 버전 관리용)

2. Next.js 프로젝트 생성

터미널에서 아래 명령어로 새 프로젝트를 생성했습니다:

npx create-next-app@latest my-next-app

설정값

- 프로잭트 생성하면 하위 설정을 하겠냐고 질문

질문	선택한 답변
TypeScript 사용?	No
ESLint 사용?	Yes
Tailwind CSS 사용?	No
src 디렉토리 사용?	Yes
App Router 사용?	No
Import alias 커스터마이징?	No

cd my-next-app

3. Node.js 버전 오류 해결

처음 npm run dev 명령어 실행 시 다음 에러가 발생했습니다:

You are using Node.js 16.16.0.
For Next.js, Node.js version "^18.18.0 || ^19.8.0 || >= 20.0.0" is required.

해결 방법

nvm install 20
nvm use 20

node -v
npm run dev

브라우저에서 http://localhost:3000 접속 성공.

4. 파일 기반 라우팅 실습

Next.js는 pages 폴더 안의 파일 이름이 곧 URL 경로가 됩니다.

pages/index.js    →   /
pages/about.js    →   /about

실습 코드 (pages/about.js)

export default function About() {
  return <h1>여기는 About 페이지입니다.</h1>;
}

5. 페이지 간 이동: Link 컴포넌트

Next.js에서는 next/link의 Link 컴포넌트를 사용해 페이지를 새로고침 없이 전환할 수 있습니다.

index.js 예시

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <h1>홈 페이지</h1>
      <Link href="/about">About으로 이동</Link>
    </div>
  );
}

6. 동적 라우팅 (Dynamic Routing)

예: /post/hello, /post/123 등

pages/post/[slug].js

import { useRouter } from 'next/router';

export default function PostDetail() {
  const router = useRouter();
  const { slug } = router.query;

  return <h1>이 게시글의 슬러그는: {slug}</h1>;
}

결과 예시

URL	출력 결과
/post/hello	이 게시글의 슬러그는: hello
/post/nextjs	이 게시글의 슬러그는: nextjs

마무리 정리

개념	설명
파일 기반 라우팅	파일명이 곧 URL 경로
Link 컴포넌트	SPA 방식으로 페이지 이동
동적 라우팅	[slug].js 파일을 통해 URL 파라미터 사용
useRouter	라우터 객체 접근 및 파라미터 추출

느낀 점

처음에는 막연했던 Next.js의 구조가 파일 이름으로 URL을 정한다는 원칙만 이해하니 명확해졌습니다. React보다 라우팅과 페이지 관리가 쉬워서, 블로그나 포트폴리오 사이트 만들기에 적합하다고 느꼈습니다.