dpectrum logo

NEXTJS v12 to v14 홈페이지 업데이트 적용기

개발

2024.01

안녕하세요. 웹 프론트 개발자 두들리 입니다. 😃

저희 홈페이지를 Next.js 12 에서 14 로 , styled-components(CSS in JS) 에서

Tailwind CSS로 바꾸는 작업을 진행하게 되었습니다.


전환을 하면서 겪었던 일이나 들었던 생각들을 정리해보겠습니다.


우선 Tailwind CSS 는 장점이 참 많고 너무 편하다는 생각이 많이 든 프레임워크 였는데요,

이번 글에서는 Next.js 14를 주로 다루고 기회가 된다면 Tailwind 를 주제로 포스팅 하도록 하겠습니다.


폴더 구조가...?

저는 처음 Next.js 프로젝트를 생성하고 디렉토리 구조를 보고 잠시 놀랐습니다.

Next12 와는 완전히 다른 구조였기 때문입니다.

Next12 에서는 /pages 폴더 안에 _document, _app 파일이 기본적으로 존재하고,

파일 또는 폴더를 생성하여 path를 결정하는 Pages Router 방식이었습니다.

Next13 부터는 /app 이라는 폴더 자체가 path를 결정하는 App Router 방식으로 바뀌었기 때문이죠.

_document, _app 의 기능들도 layout 이라는 개념으로 바뀌었고,

파일명으로 기능을 정의할 수 있게 되었습니다.

대표적으로 (파일 확장자는 js, jsx, ts, tsx 모두 가능합니다.)

  • layout.jsx ⇒ state를 유지하며, 리렌더링 되지 않습니다. 여러 페이지에서 공유되는 UI를 정의합니다.
  • template.jsx ⇒ layout과 비슷한 역할이지만, 라우트 간 이동시 리렌더 됩니다.
  • head.jsx ⇒ next/head 즉 HTML에 <head> 를 대체하는 파일입니다.
  • error.jsx ⇒ 에러가 발생시, UI를 보여줍니다.

등이 있습니다.


출처 : nextjs doc


layout, template은 파일 계층 구조로 중첩되어 적용


Styled-components 대신 Tailwind

사실 처음부터 컴포넌트 스타일링 방식을 바꿀 생각은 없었습니다.

Next.js 13+ 에 맞춰 styled-components 세팅도 다 하고 진행했습니다.

하지만 포트폴리오 페이지를 들어갈 즈음, 컴포넌트를 다시 지우고 Tailwind CSS 로 전환했습니다.

페이지 이동, 새로고침 시 잠깐 깜박이는 현상이 있기 때문입니다.

Next.js 는 서버사이드 렌더링으로, 서버에서 미리 HTML이 생성됩니다.

하지만, styled-components 의 style은 서버가 아닌

클라이언트 런타임 때 생성되고 주입이 되기 때문에 그 잠깐의 시간동안 깜빡임이 존재하게 됩니다.

이와 관련해서도 Next.js 공식문서에 경고문구가 있습니다.

또한 Next12 와는 다르게 _document.js 파일이 존재하지 않기 때문에

registry파일을 만들어 Root Layout에 Provider 형식으로 감싸줘야합니다.

Next.js 13 에서 중점으로 다루고 있는 기능은 서버 컴포넌트인데

클라이언트 컴포넌트로 만들어 계속 styled-components 를 유지해야하나 고민을 많이 했습니다.

Next12 로 개발할 당시는 styled-components 가 편하다 생각되어 진행하였지만,

이번 업데이트 에서는 Tailwind CSS 가 많이 익숙해 지기도 했고,

서버 컴포넌트로 사용할수 있다는점,

반응형을 쉽게 스타일링 할 수 있다는 점이 크다 생각되어 바꾸게 되었습니다.


SEO, Data Fetching

검색엔진에서 상위 노출도를 높이기 위해서는 SEO(검색엔진 최적화)가 상당히 중요합니다.

그래서 저희 홈페이지도 React기반 SSR(Server Side Rendering) 프레임워크인 Next.js 를 사용하고 있습니다.

Next.js 12 에서는 _document.js 나 각 페이지에 <head> 태그 안에 작성을 했었습니다.


이런식으로 JSX안에 직접적으로 넣어주는 방식이었습니다.

Next.js 13 부터는 layout.js 나 페이지에 metadata 라는 객체를 선언한 후 작성을 하면 됩니다.

물론 서버 컴포넌트에서만 가능합니다. ‘use client’ 를 선언하시면 에러가 납니다.

또한 동적으로 SEO를 설정할 수 있는데 이 부분은 data fetching 과 함께 설명드리겠습니다.

Next.js 에는


  • getStaticProps, getStaticPaths를 사용하는 SSG(Static-Site Generation)

  • getServerSideProps를 사용하는 SSR(Server-Side Rendering)

두가지 pre-Rendering 방식이 있습니다.

하지만 Next.js 13 부터는 fetch()를 사용하는 Data Fetching 으로 바뀌었습니다.

마치며

Next.js 12에서 14 업데이트에 대하여 적어 보았습니다.

변경한 부분이 많아 공부도 많이 하고 시간도 많이 걸렸지만,

그만큼 Next.js 14 는 개발 속도, 유지보수 등 장점이 많은 것 같습니다.

아직은 자료가 많이 없어 에러가 나면 찾기 힘들기도 하고,

불안정한 기능들을 안정화 시키는 단계라 지속적으로 확인하는게 좋을 것 같습니다.


긴 글 읽어주셔서 감사합니다.

Loading...