(최신) Next.js 시작하기: 초보자를 위한 따라하기 가이드

Next.js는 React를 기반으로 한 혁신적인 웹 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 등 다양한 기능을 제공합니다.

Next.js를 처음 접하는 개발자를 위해 프로젝트 설정부터 기본 개념까지 모두 설명합니다. Next.js를 사용해 빠르게 효율적인 웹 애플리케이션을 구축해 보세요!

✅ Next.js란?

Next.js는 React의 강력한 기능을 더욱 향상시키는 프레임워크로, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 파일 기반 라우팅 등 많은 편리한 기능을 내장하고 있어 효율적인 웹 애플리케이션을 만들 수 있도록 도와줍니다.
Next.js는 많은 기업과 개발자들이 선택하는 프레임워크입니다.

✅ 주요 특징:

• 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 지원

• 파일 기반 라우팅: 간단한 파일 추가만으로 페이지 자동 생성

• API 라우트: 서버리스 API 엔드포인트 구축

• 자동 코드 분할: 페이지별로 코드 분할하여 성능 최적화

✅ Next.js 프로젝트 시작하는 방법

• 1단계: Node.js 설치

Next.js는 Node.js 환경에서 실행되므로, 먼저 Node.js가 설치되어 있는지 확인해야 합니다. 터미널에서 아래 명령어를 입력하여 Node.js가 설치되었는지 확인합니다.

node -v
npm -v

Node.js가 설치되어 있지 않다면, Node.js 공식 웹사이트에서 다운로드하여 설치합니다.

• 2단계: Next.js 설치하기

Next.js 프로젝트는 create-next-app을 사용해 쉽게 설정할 수 있습니다. 아래 명령어를 입력하여 새 프로젝트를 생성합니다.

반응형

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

my-next-app은 프로젝트 이름으로 원하는 대로 변경할 수 있습니다.

• 3단계: 개발 서버 실행

Next.js 프로젝트가 설치되면 아래 명령어로 개발 서버를 실행합니다.

npm run dev

브라우저에서 http://localhost:3000에 접속하면, Next.js의 기본 환영 페이지가 표시됩니다.

✅ Next.js 기본 폴더 구조 및 파일

Next.js는 기본적으로 몇 가지 중요한 폴더와 파일을 제공합니다. 각 폴더와 파일의 역할을 이해하고 프로젝트를 효율적으로 구성할 수 있습니다.

• pages/: 페이지 컴포넌트를 넣는 폴더입니다. pages/index.js는 홈페이지를, pages/about.js는 /about 페이지를 자동으로 생성합니다.

• public/: 정적 파일을 넣는 폴더로, 이미지, 아이콘 등을 관리합니다.

• components/: 재사용 가능한 UI 컴포넌트를 저장하는 폴더입니다. 이를 통해 코드의 중복을 줄이고, 유지보수를 쉽게 할 수 있습니다.

• styles/: CSS 파일을 관리하는 폴더입니다. Next.js는 CSS 모듈을 지원하므로 각 컴포넌트별로 스타일을 독립적으로 관리할 수 있습니다.

Next.js에서 페이지 만들기

Next.js는 파일 기반 라우팅을 사용하여 페이지를 자동으로 연결합니다.
페이지를 만들려면 pages 폴더에 .js 파일을 생성하기만 하면 됩니다.

• 기본 페이지 만들기

1. pages/about.js 파일을 생성합니다.
// pages/about.js

function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to our about page.</p>
    </div>
  );
}

export default About;

2. http://localhost:3000/about에 접속하면 "About Us" 페이지를 볼 수 있습니다.

• 동적 라우팅 사용하기

Next.js는 동적 라우팅을 지원하여 URL에 따라 콘텐츠를 변경할 수 있습니다. [id].js 파일을 사용하여 동적 경로를 처리할 수 있습니다.

1. pages/post/[id].js 파일을 생성합니다.
// pages/post/[id].js

import { useRouter } from 'next/router';

function Post() {
  const router = useRouter();
  const { id } = router.query;

  return (
    <div>
      <h1>Post {id}</h1>
      <p>This is a post with ID {id}.</p>
    </div>
  );
}

export default Post;

2. http://localhost:3000/post/1, http://localhost:3000/post/2 등의 경로로 접속하면 각기 다른 콘텐츠가 표시됩니다.

✅ API 라우트 사용하기

Next.js는 API를 처리할 수 있는 기능도 제공합니다. pages/api 폴더에 파일을 추가하여 API 라우트를 쉽게 만들 수 있습니다.

• 간단한 API 만들기

1. pages/api/hello.js 파일을 생성합니다.
// pages/api/hello.js

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from API!' });
}

2. http://localhost:3000/api/hello로 접속하면 { message: 'Hello from API!' }라는 JSON 응답을 받을 수 있습니다.

✅ 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)

Next.js는 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG) 을 지원합니다.

• SSG 예시: getStaticProps

// pages/index.js

export async function getStaticProps() {
  return {
    props: { message: 'Hello from Static Generation' },
  };
}

function HomePage({ message }) {
  return <h1>{message}</h1>;
}

export default HomePage;

• SSR 예시: getServerSideProps

// pages/index.js

export async function getServerSideProps() {
  return {
    props: { message: 'Hello from Server Side Rendering' },
  };
}

function HomePage({ message }) {
  return <h1>{message}</h1>;
}

export default HomePage;

✅ 결론

Next.js는 React를 사용하는 웹 애플리케이션 개발에 있어 강력한 기능을 제공하는 프레임워크입니다.

Netx.js 라우팅 개념 익히러 가기

이 가이드가 도움이 되셨다면,

구독과 좋아요 꾸욱