이번에 과제로 Next.js에 대하여 공부를 하게 되었다.
내가 배우며 기억에 남는 몇가지를 소개하려 한다.

Next.js란

Next.js는 풀스택 웹 애플리케이션을 구축하기 위한 React 프레임워크입니다. 사용자 인터페이스를 만들기 위해 React Components를 사용하고, 추가 기능과 최적화를 위해 Next.js를 사용합니다.

라고 공식문서에서 말한다.

그래서 왜 사용할까?

사용 이유를 알기 위해서 react와 비교해보자

React란

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

라고 공식문서에서 말한다.

심지어 공식문서에서

React는 라이브러리입니다. 컴포넌트를 조합할 수 있도록 도와주지만, 라우팅이나 데이터를 가져오는 방법을 규정하지는 않습니다. React로 완전한 앱을 만들려면, Next.js 또는 React Router 같은 풀스택 React 프레임워크를 추천합니다.

라고 Next,js 를 직접 언급하기도 한다.

자, 그러면 여기서 알 수 있는 점은 라우팅이나 데이터를 가져오는 방법이 추가된다는 것이다.

내 생각엔 Next.js를 사용하기 위한 특별한 특징이

• Rendering (SEO)
• Data Fetching
• Routing

등이 있을 것 같다.

Rendering

작성한 코드를 사용자 인터페이스로 변환하는 과정

렌더링 방식으로는

• CSR (Client-Side Rendering)
• SSR (Server-Side Rendering)
• SSG (Static Site Generation)
• ISR (Incremental Static Regeneration)

등이 있다.
React 단독으로는 SSR 구조를 제공하지 않는다. 따라서 CSR을 사용하면 SEO가 취약하다.
하지만 Next.js는 기본적으로 SSR을 사용하여 SEO가 강력하고, CSR 설정도 가능하기 때문에 사용자와 상호작용 하는데에도 문제가 없다.

Data Fetching

React는 기본적으로 CSR(Client Side Rendering) 방식을 사용한다.
이 경우 페이지 렌더링과 데이터 요청 흐름은 다음과 같다.

Page 렌더링 → API 요청 → 재렌더링 → API 응답 데이터 출력

즉, 브라우저에서 먼저 화면을 그린 뒤
useEffect 등을 통해 데이터를 요청하고
응답이 도착하면 다시 렌더링이 발생한다.

반면 Next.js는 CSR뿐만 아니라 SSR(Server Side Rendering)과
Server Component 기반의 렌더링을 지원한다.
이 경우 데이터 요청 흐름은 다음과 같다.

API 요청 → API 응답으로 페이지 생성 → 페이지 출력

서버에서 데이터를 먼저 가져온 뒤
해당 데이터를 포함한 HTML을 생성하여 브라우저에 전달하기 때문에
초기 렌더링 속도와 SEO 측면에서 이점을 가진다.

Routing

URL에 따라 서로 다른 페이지를 보여주는 것

기본 Routing

React에서는

  <>
      {!(pathname === "/404") && <Header />}
      <Routes>
        <Route path="/" element={<MainPage />} />
        <Route path="/main" element={<MainPage />} />
        <Route path="/login" element={<Login />} />
        <Route path="/404" element={<NotFound />} />
        <Route path="*" element={<Navigate to="/404" replace />} />
      </Routes>
    </>

이런식으로 React-Router-Dom 과 같은 라이브러리를 이용하여 구현한다.

하지만 Next.js에서는 파일 시스템 기반 라우팅을 사용한다.

예를 들어 app/page.tsx는 / 경로에 대응되고,
app/posts/page.tsx는 /posts 경로에 대응된다.
즉, 폴더를 추가하는 것만으로 새로운 페이지를 만들 수 있다

동적 Routing

URL에 동적으로 변하는 값이 필요한 경우, 폴더 이름을 대괄호[]로 감싸서 표현할 수 있다.

예를들어 app/posts/[id]/page.tsx와 같이 구성하면 /posts/1, /posts/2와 같은 다양한 경로를 하나의 페이지에서 처리할 수 있으며, 해당 값은 params를 통해 접근할 수 있다.

Route Groups

라우트 그룹은 폴더 이름을 ( )로 감싸는 방식으로, URL에는 영향을 주지 않으면서 폴더 구조를 정리할 수 있게 해준다. 주로 레이아웃을 분리하거나 기능 단위로 코드를 정리할 때 사용된다.

아마 위와같은 장점들이 있기 때문데 Next.js를 사용하는게 아닌가 생각이 든다.

Hello, GSM은 Next.js를 왜 사용할까

우선 Hello, GSM은 광주 소프트웨어마이스터 고등학교 입학지원 시스템이다.
https://www.hellogsm.kr/
https://github.com/themoment-team/hellogsm-front-25

Hello, GSM이 Next.js를 사용한 이유는 크게

• SSR 지원
• 파일기반 라우팅 구조
• 서버 컴포넌트 사용

때문일 것 같다.

SSR (Server-Side Rendering) 지원

Hello, GSM은 우리 학교에 입학하기 위해서는 꼭 사용해야하는 서비스이다.
따라서 구글 검색을 했을 때 상단에 나와야 사용자들이 접근하기 편리하다. 또한 사용자에게 빠르게 정보를 전달하는 것이 중요하다.

SSR 사용이 편리한 Next.js에서 SEO에 유리하게 적용되고 서버에서 파일을 불러오기 때문에 위 문제를 해결 가능하다.

파일기반 라우팅 구조

Hello, GSM은 단기간 운영하는 서비스가 아닌 계속해서 여러 사람이 협업하며 유지보수를 해야하는 중요한 서비스인다.

Next.js의 직관적인 파일 구조와 라우팅 구조는 이해가 쉽게 되어 있어 협업과 유지보수의 질을 높여준다 생각한다.

서버 컴포넌트 사용

Next.js는 기본적으로 “Server Component”로 페이지를 구성할 수 있다.
이 컴포넌트는 서버에서 데이터 패칭을 먼저 수행하고 HTML을 생성한 후 클라이언트로 전달되기 때문에 성능과 SEO, 보안 측면에서 유리하다.

Hello, GSM에서 Next.js 사용

위 사용 이유를 바탕으로 어디서 사용되는지 알아보자.

SSR (Server-Side Rendering)

대표적으로 faq, guide 페이지가 SSR을 사용하여 SEO에 유리하다.

파일기반 라우팅 구조

Hello, GSM github 이다. 파일기반 라우팅 구조를 사용하여 유지보수가 편리하다!

서버 컴포넌트 사용

IntroducePage에서 서버 컴포넌트를 사용해, 데이터를 먼저 불러온 후 하나씩 렌더링 한다. 이는 서버에서 데이터를 관리하는 사례이다.