What is Next js

모던 웹 프레임워크인 Next js에 대해 간단히 알아보자

---

Next js

• React를 기반으로 한 웹 애플리케이션 프레임워크로, 서버와 클라이언트 양쪽에서 코드를 실행할 수 있는 하이브리드 렌더링, 뛰어난 성능, 개발 편의성을 제공.

• 단순한 정적 사이트부터 복잡한 동적 웹 애플리케이션까지 다양한 프로젝트에 적합하며, 프론트엔드 개발자에게 많은 유용한 기능을 제공.

주요 특징

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

Next.js는 서버에서 페이지를 미리 렌더링한 후 클라이언트에 전달해준다. 이를 통해 초기 로딩 시간을 줄이고 SEO 최적화에도 도움을 준다. 서버에서 데이터를 가져와 화면에 즉시 표시할 수 있기 때문에 사용자에게 빠른 응답을 제공한다.

export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

function Page({ data }) {
  return <div>{data.title}</div>;
}

export default Page;

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

미리 페이지를 정적으로 생성해 배포할 수 있어 매우 빠른 성능을 자랑한다. 빌드 시점에 데이터를 불러와서 페이지를 생성한다.

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

function BlogPost({ data }) {
  return <div>{data.title}</div>;
}

export default BlogPost;

3. 파일 기반 라우팅

Next.js는 파일 시스템을 기반으로 페이지를 자동으로 라우팅한다. pages 디렉토리에 파일을 추가하면, 그 파일 이름이 URL 경로로 자동 매핑된다. 복잡한 라우팅 설정을 따로 할 필요 없이 파일 구조만으로 깔끔하게 라우팅이 가능하다.

• pages/index.js는 /로 매핑된다.

• pages/about.js는 /about으로 매핑된다.

4. API Routes

Next.js는 백엔드 API를 쉽게 구현할 수 있는 API Routes 기능을 제공한다. 서버리스 함수처럼 동작하며, 클라이언트에서 데이터를 요청할 때 별도의 백엔드 서버 없이도 API를 생성할 수 있다.

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

5. 이미지 최적화

Next.js는 기본적으로 이미지 최적화 기능을 제공하여, 페이지 로딩 속도를 향상시킬 수 있다. 자동으로 크기 조정, 포맷 변환 등을 수행하여 성능과 사용자 경험을 개선한다.

Next.js를 사용하는 이유

성능 최적화: 서버 사이드 렌더링과 정적 사이트 생성을 통해 빠른 페이지 로딩을 제공하며, 이미지 최적화, 코드 스플리팅 등 성능을 극대화하는 기능들이 내장되어 있다.

SEO 친화적: Next.js는 SSR과 SSG를 통해 검색 엔진이 쉽게 콘텐츠를 크롤링할 수 있게 해준다. 이를 통해 SEO 최적화가 중요한 웹사이트에서도 유리하다.

개발자 경험: 파일 기반 라우팅, 자동 리프레시, 타입스크립트 및 CSS 모듈 지원 등 개발자가 쉽고 빠르게 작업할 수 있도록 다양한 개발 편의 기능을 제공한다.

확장성: Next.js는 작은 프로젝트부터 대규모 애플리케이션까지 확장 가능한 구조를 가지고 있으며, API Routes를 통해 서버리스 기능을 통합할 수 있어 프론트엔드와 백엔드 개발 모두를 커버할 수 있다.

빠른 배포: Next.js는 정적 파일 생성을 지원하여, 배포 시 성능을 극대화할 수 있으며 Vercel 같은 플랫폼과 쉽게 통합되어 배포 속도를 높인다.

결론

Next.js는 강력한 성능과 유연성을 제공하면서도 사용하기 쉬운 프레임워크이다.

SEO, 빠른 초기 로딩, 개발자 경험, API 통합 기능 등을 모두 고려한다면, Next.js는 React 기반의 웹 애플리케이션 개발에 있어 최고의 선택지 중 하나이다.