[Next.js] 넥스트로 배우는 현대적인 웹 개발

728x90

Next.js 

Next.js는 React 기반의 웹 애플리케이션 개발을 위한 프레임워크입니다. React는 컴포넌트 기반 UI 라이브러리로 강력하지만, 실제 웹 애플리케이션을 만들기 위해서는 라우팅, 데이터 패칭, 서버 렌더링, SEO 최적화, 코드 분할 등의 여러 요소를 직접 구현해야 합니다.

Next.js는 이러한 복잡한 기능들을 기본 제공하여, 개발자가 더 적은 설정과 코드로 더 강력한 웹 애플리케이션을 만들 수 있도록 도와줍니다.

 

---

1.  Next.js란 무엇인가요?

Next.js는 React 기반의 웹 애플리케이션을 쉽고 빠르게 개발할 수 있도록 도와주는 프레임워크입니다. 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), API 라우팅, 이미지 최적화 등 React로는 직접 구현하기 복잡한 기능들을 간단한 설정만으로 사용할 수 있게 해줍니다.

Next.js는 Vercel에서 개발 및 유지보수하고 있으며, SEO 최적화, 성능 향상, 개발자 경험 향상 등을 목적으로 많은 기업들이 채택하고 있습니다.

 

왜 Next.js를 사용해야 할까요?

React는 클라이언트 사이드 렌더링(CSR)에 최적화되어 있지만, 이로 인해 생기는 문제점들이 있습니다.

• 초기 로딩 속도 저하
• SEO(검색엔진 최적화) 어려움
• 코드 분할, 이미지 최적화 등 직접 처리해야 할 일 많음

Next.js는 이 문제를 다음과 같은 기능들로 해결합니다.

• 서버 사이드 렌더링(SSR) : HTML을 서버에서 렌더링 후 전송하여 초기 로딩 속도 및 SEO 향상
• 정적 사이트 생성(SSG) : 빌드 시 HTML을 생성해 배포
• 하이브리드 렌더링 지원 : 페이지마다 CSR, SSR, SSG를 선택 가능
• API Routes : 백엔드 기능까지 처리 가능한 간단한 서버리스 API 구축
• 자동 코드 분할 : 각 페이지 단위로 번들링하여 초기 로딩 최적화
• 이미지 최적화(Image Optimization) : next/image 컴포넌트를 통한 자동 이미지 최적화

 

---

2.  기본적인 Next.js 프로젝트 구조

my-app/
├── pages/          # 페이지 라우팅 처리
│   ├── index.js    # /
│   ├── about.js    # /about
│   └── api/        # API 라우트
├── public/         # 정적 파일 (이미지, 폰트 등)
├── styles/         # CSS/SCSS 파일
├── next.config.js  # 설정 파일
├── package.json

기본 페이지 예제

// pages/index.js
export default function Home() {
  return (
    <div>
      <h1>Next.js 시작하기</h1>
      <p>이것은 서버 사이드 렌더링이 되는 React 페이지입니다.</p>
    </div>
  );
}

 

---

3.  데이터 패칭 - getStaticProps, getServerSideProps

Next.js에서는 페이지에서 데이터를 불러올 때 빌드 타임(static) 또는 요청 시(server-side) 데이터를 패칭할 수 있도록 두 가지 특수 함수인 getStaticProps와 getServerSideProps를 제공합니다.

a.  getStaticProps - 정적 생성 (SSG)

페이지를 정적으로 생성(SSG) 합니다. 빌드 시 데이터를 미리 가져와 HTML을 생성하므로 빠른 응답 속도와 좋은 SEO를 제공합니다. 자주 변경되지 않는 데이터에 적합합니다.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

b.  getServerSideProps - 서버 측 렌더링 (SSR)

매 요청마다 서버에서 실행되어 데이터를 가져온 뒤 페이지를 렌더링합니다. 실시간 데이터나 사용자 요청에 따라 다른 페이지가 필요한 경우에 적합합니다.

export async function getServerSideProps(context) {
  const res = await fetch(`https://api.example.com/posts`);
  const posts = await res.json();

  return {
    props: {
      posts,
    },
  };
}

 

---

4.  라우팅 시스템

Next.js는 파일 기반 라우팅을 사용합니다. 즉, pages 디렉토리에 있는 파일이 곧 URL이 됩니다.

파일명	라우트 경로
index.js	/
about.js	/about
blog/[id].js	/blog/123 등 동적 라우트

API Routes

Next.js는 백엔드 기능도 간단하게 구현할 수 있습니다. pages/api 디렉토리에 파일을 만들면 자동으로 API 라우트가 됩니다.

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello Next.js!' });
}

 

---

5.  이미지 최적화 예시

Next.js는 next/image 컴포넌트를 통해 이미지 크기 최적화 및 지연 로딩(Lazy Loading)을 자동으로 처리합니다.

import Image from 'next/image';

export default function Profile() {
  return (
    <Image
      src="/profile.jpg"
      alt="Profile Image"
      width={200}
      height={200}
    />
  );
}

 

---

6.  마무리

• Next.js는 React 애플리케이션 개발을 보다 강력하고 효율적으로 만들어주는 프레임워크입니다.
• SSR, SSG, API Routes, 이미지 최적화 등 현대 웹 개발에 필요한 기능을 기본으로 제공합니다.
• 파일 기반 라우팅, 자동 코드 분할, 성능 향상, SEO 최적화 등 여러 장점이 있습니다.

함께 보면 좋은 자료

외부 사이트 : 

• 공식 사이트 - Next.js
• 공식 사이트 - React

 

---