240701 TIL

Next.js의 기초

오늘은 Next.js에 대해 공부해보았습니다. Next.js는 React 애플리케이션을 위한 프레임워크로, 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 손쉽게 구현할 수 있도록 도와줍니다. 아래는 제가 오늘 배운 Next.js의 기초 내용들입니다.

1. Next.js 설치 및 프로젝트 생성

Next.js 프로젝트를 생성하기 위해서는 다음과 같은 명령어를 사용합니다:

npx create-next-app my-next-app
cd my-next-app
npm run dev

위 명령어를 통해 새로운 Next.js 프로젝트를 생성하고, 개발 서버를 실행할 수 있습니다. 기본적으로 개발 서버는 http://localhost:3000에서 실행됩니다.

2. 파일 기반 라우팅

Next.js는 파일 시스템을 기반으로 라우팅을 자동으로 설정합니다. 예를 들어, pages 디렉토리 안에 about.js 파일을 생성하면, /about 경로로 접근할 수 있는 페이지가 자동으로 생성됩니다.

• pages/index.js: 기본 루트 페이지 (/)
• pages/about.js: About 페이지 (/about)

3. 서버 사이드 렌더링 (SSR)

Next.js는 서버 사이드 렌더링을 기본으로 지원합니다. 페이지 컴포넌트에서 getServerSideProps 함수를 사용하여 서버에서 데이터를 미리 가져올 수 있습니다.

export async function getServerSideProps() {
  // 서버에서 데이터를 가져옴
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

const Page = ({ data }) => {
  return <div>{/* 데이터 사용 */}</div>;
}

export default Page;

4. 정적 사이트 생성 (SSG)

정적 사이트 생성을 위해 getStaticProps 함수를 사용합니다. 빌드 타임에 페이지를 미리 생성하여 빠른 로딩 속도를 제공합니다.

export async function getStaticProps() {
  // 빌드 타임에 데이터를 가져옴
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

const Page = ({ data }) => {
  return <div>{/* 데이터 사용 */}</div>;
}

export default Page;

5. 동적 라우팅

파일 이름에 대괄호를 사용하여 동적 라우팅을 설정할 수 있습니다. 예를 들어, pages/posts/[id].js 파일을 생성하면, /posts/1, /posts/2 등의 동적 경로를 처리할 수 있습니다.

import { useRouter } from 'next/router';

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

  return <p>Post: {id}</p>;
}

export default Post;

결론

Next.js는 React를 기반으로 한 강력한 프레임워크로, 서버 사이드 렌더링과 정적 사이트 생성을 손쉽게 구현할 수 있습니다.