멈추지 않는 기록

[Next.js] React만 쓰던 내가 Next.js 튜토리얼에서 놀란 이유 본문

웹 개발/Next.js

[Next.js] React만 쓰던 내가 Next.js 튜토리얼에서 놀란 이유

pangil_kim 2025. 4. 16. 03:22
728x90

“React만으로도 충분한데, 굳이 Next.js를 배워야 할까?”

 

23년도 가을부터 React를 접하면서 웹개발을 해왔던 필자에게는 Next.js, Vue.js 등을 접해야 할 필요성을 못 느끼고 있었다.

 

그러다 최근 Next.js + TS 개발이 붐 하는 분위기를 마주하고, 사진처럼 이런 생각을 가지고 Next.js 튜토리얼을 시작했다.

 

그러나 막상 공식 튜토리얼을 따라가다 보니, 단순한 React 확장이 아니라 웹 개발에 필요한 진짜 기능들을 제대로 갖춘 프레임워크라는 것을 깨닫게 되었다.

 

이 글에서는 튜토리얼을 통해 경험한 Next.js의 구조, React와의 공통점과 차이점, 그리고 개인적으로 유익했던 배움의 포인트들을 정리해보았다.

 

 

튜토리얼 간략 정리

 

Next.js의 공식 튜토리얼은 nextjs.org/learn에서 제공되며, 마크다운 블로그 형태의 간단한 프로젝트를 만들어가며 Next.js의 핵심 기능들을 실습할 수 있도록 구성되어 있다.

 

튜토리얼에서는 다음과 같은 기능들을 경험할 수 있다.

  • pages 디렉토리 기반 라우팅
  • getStaticProps, getServerSideProps를 활용한 데이터 패칭
  • Link, Image, Head 컴포넌트를 활용한 최적화된 UI 구성
  • _app.tsx를 통한 전역 설정 구성

전체적으로는 React를 기반으로 하고 있어 익숙한 부분도 많지만, 서버사이드 렌더링과 관련된 개념은 React 프로젝트에서는 경험하기 어려운 새로운 영역이었다.

 

 

 

React와 동일한 부분

 

튜토리얼을 따라가면서 가장 먼저 느낀 점은, React의 핵심 문법과 구조가 그대로 유지되어 있다는 점이다.

 

예를 들어 JSX 문법, useState, useEffect와 같은 훅 사용 방식, props를 통한 컴포넌트 간 데이터 전달 등은 기존의 React 방식과 동일하였다.

 

따라서 기존에 React를 어느 정도 다룰 줄 아는 개발자라면 Next.js의 기본 구조에는 쉽게 적응할 수 있을 것이다.

 

 

 

Next.js만의 특징

 

Next.js가 React와 차별화되는 주요 포인트는 다음과 같다.

 

1) 파일 기반 라우팅

pages 디렉토리 내부의 파일명으로 URL이 자동 매핑되는 구조를 가지고 있다.

/pages/index.tsx → /
/pages/posts/[id].tsx → /posts/1

React에서는 react-router를 사용하여 라우팅을 설정했지만, Next.js는 파일 생성만으로 라우팅을 구성할 수 있어 더욱 직관적이다.

 

2) Link, Image, Head 컴포넌트

Next.js에서는 Link, Image, Head 등 자체적으로 제공하는 컴포넌트들을 사용하게 된다.

import Link from 'next/link'
import Image from 'next/image'
import Head from 'next/head'
  • Link: 클라이언트 사이드 전환과 prefetch 기능 제공
  • Image: 자동 최적화 및 lazy loading 지원
  • Head: HTML <head>에 직접 접근 가능, SEO 최적화에 유리
🚨잠깐!!🚨 SEO에 대해서는 아래 글을 참고하자!
https://pangil-log.tistory.com/279
 

[Next.js] React는 왜 SEO에 약할까? Next.js가 해답이다

“웹사이트를 만들었는데 아무도 안 온다…?”“구글에 검색해도 내 사이트가 안 나온다…?”이럴 땐 코드보다 먼저 SEO를 의심해야 한다. SEO란 무엇인가? SEO는 Search Engine Optimization, 즉 검색엔진

pangil-log.tistory.com

 

 

이러한 컴포넌트들은 성능 최적화와 SEO 측면에서 매우 효과적이다.

 

3) getStaticProps와 getServerSideProps

Next.js에서는 페이지 단위로 데이터를 불러오는 방법을 명시할 수 있다.

  • getStaticProps: 빌드 타임에 데이터를 불러와 정적으로 페이지를 생성한다.
  • getServerSideProps: 요청 시마다 데이터를 불러와 페이지를 생성한다.

이와 같은 데이터 패칭 방식은 React 프로젝트에서는 직접 구현해야 했던 부분이지만, Next.js에서는 프레임워크 차원에서 이를 제공하고 있다

🚨잠깐!!🚨 데이터 패칭 및 getStaticProps와 getServerSideProps에 대해서는 아래 글을 참고하자!
https://pangil-log.tistory.com/280
 

[Next.js] getStaticProps와 getServerSideProps, Next.js가 데이터에 진심인 이유

“데이터는 언제 불러와야 하지?”“초기 로딩 화면이 자꾸 비어 있다…”“검색엔진에 내 콘텐츠가 안 보인다…” React로 웹 애플리케이션을 만들면서 이런 경험을 한 적이 있다면, 지금부터

pangil-log.tistory.com

 

4) _app.tsx를 통한 전역 설정 (Pages Router의 경우)

_app.tsx는 모든 페이지에 공통으로 적용되는 컴포넌트를 설정하는 파일이다.

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

전역 레이아웃, 전역 스타일, 전역 상태 관리 로직 등을 설정하기에 적합하다.

 

 

 

느낀 점 및 배운 점

 

Next.js 튜토리얼을 통해 다음과 같은 인사이트를 얻을 수 있었다.

  • React에 익숙한 개발자라면 빠르게 적응할 수 있다.
  • 정적 사이트 생성(SSG), 서버사이드 렌더링(SSR) 개념을 직접 체험할 수 있다.
  • SEO와 성능을 고려한 웹 개발이 자연스럽게 이루어진다.
  • 페이지 단위의 데이터 패칭 및 라우팅 구조가 React보다 훨씬 직관적이다.

 

 

 

 마무리

 

Next.js 공식 튜토리얼은 React 개발자가 SSR, SEO, 정적 사이트 생성과 같은 개념을 학습하는 데에 매우 좋은 입문 자료였다. 기존의 React 프로젝트에서 경험할 수 없었던 서버 사이드와 정적 처리 방식의 차이를 명확히 체험할 수 있었고, 앞으로 프로젝트를 진행할 때 Next.js를 더 적극적으로 고려하게 될 것으로 보인다.

 

728x90

'웹 개발 > Next.js' 카테고리의 다른 글

[Next.js] getStaticProps와 getServerSideProps, Next.js가 데이터에 진심인 이유  (0) 2025.04.16
[Next.js] React는 왜 SEO에 약할까? Next.js가 해답이다  (0) 2025.04.16
[Next.js] <Image> 태그, 왜 width와 height를 안 쓰면 에러가 날까?  (1) 2025.04.06
[Next.js] 단순히 태그만 바꾸라고? <img> 대신 <Image>를 써야 하는 진짜 이유  (0) 2025.04.06
[Next.js] Tailwind CSS 수식어, 진짜 쉽게 정리해봄!  (0) 2025.04.06
'웹 개발/Next.js' Related Articles more