🍀 2025년 왜 Next.js를 도입했는가?

이전까지 저는 CSR 방식으로만 프로젝트를 진행하며, 부족한 SEO를 보완하기 위해 여러 시도를 해왔습니다.

예를 들어, 더미 페이지를 만들어 검색엔진에 노출되도록 유도한 뒤, 실제 콘텐츠 페이지로 리다이렉트하는 방식으로 우회적인 SEO 최적화를 시도하기도 했습니다.

하지만 시간이 지날수록 프로젝트에 담기는 경험 글과 콘텐츠 양이 늘어났고, 대부분의 글은 Notion에 작성한 뒤 이를 동적으로 불러오는 구조로 발전했습니다. 이로 인해 기존의 CSR 방식만으로는 한계가 명확했고, 제 글이 조금 더 검색엔진에 노출 될 수 있게 하는데에 욕구가 커져갔습니다.

이러한 문제를 간단하게 해결하기 위해 선택한 것이 바로 Next.js였습니다. Next는 프레임 워크라서 동적 데이터를 정적으로 사전 렌더링(SSG)할 수 있는 기능을 제공하여, 콘텐츠가 검색엔진에 잘 노출되도록 만들 수 있습니다.

FE | MR.CHU

Creative Developer specializing in Three.js, WebGL, and AI-driven 3D animation

https://mr-chu-home-page.vercel.app/

✅ Sitemap 생성

이전에는 page router 기반에서 getStaticProps, getStaticPaths를 사용했지만, app router 구조에서는 이를 대신해 generateStaticParams()를 활용하여 정적 페이지를 생성하고 있습니다.

또한, 과거에는 sitemap 생성을 위해 next-sitemap 라이브러리를 사용했지만, 최근에는 Next.js 자체적으로 제공하는 generateSitemaps() 기능을 활용할 수 있어 훨씬 간단하게 SEO 설정을 관리할 수 있게 되었습니다.

📌 generateSitemaps()는 Next.js 14부터 정식 도입되었으며, app 디렉토리 구조에서 metadata API와 함께 작동해 별도 설정 없이 자동으로 sitemap.xml을 생성해줍니다.

✅ 합성 컴포넌트 패턴 도입

• 최근에 알게 된 합성 컴포넌트(Compound Components) 패턴이 구조적으로 깔끔하고 확장성이 높아 보여 모달 컴포넌트에서 시도해봤습니다.

ModalStyle.Nav = ModalTopNav;
ModalStyle.Content = ModalContent;

export default ModalStyle;

<ModalProvider>
   <ModalStyle>
      <ModalStyle.Nav>{text}</ModalStyle.Nav>
      {children}
   </ModalStyle>
</ModalProvider>

✅ 스타일링 & 상태 관리 방식 변경의 이유

이번 리팩토링 과정에서 스타일링 방식과 전역 상태 관리 방식도 최근 트렌드에 맞춰 점진적으로 변경하고 있습니다.

스타일링: styled-components → SCSS

상태 관리: atom 기반 → Redux Toolkit

• 두 가지 모두 현재는 업계에서 점점 덜 사용되는 추세이기 때문에 변경을 결정하게 되었습니다.

💅 styled-components → SCSS styled-components는 한때 매우 인기 있었지만, 최근에는 CSS Modules, SCSS, Tailwind CSS 등 더 가볍고 단순한 스타일링 방식들이 주로 사용되고 있습니다. 특히 Next.js에서는 별다른 설정 없이 SCSS를 사용할 수 있어 마이그레이션이 간편했고, 개인적으로도 SCSS가 더 익숙하고 빠르게 작업할 수 있어 전환을 결정했습니다.

🔄 atom → Redux Toolkit atom을 초기에는 사용 했지만, 해당 라이브러리의 핵심 개발팀이 해체되었고 이번 리팩토링에서는 Redux Toolkit을 한 번 정식으로 다시 써보며 구조적으로 정리하고자 했습니다.

✅ vite 프레임워크로 변경

(2024/01/18) Vite 추가

export default defineConfig({
	plugins: [react(), tsconfigPaths()],
	build: {
	rollupOptions: {
	output: {
			manualChunks(id) {
				if (id.includes('node_modules/@react-spring')) {
					return 'react-spring';
				}
				if(id.includes('node_modules/date-fns')){
					return 'date-fns'
				}
				if(id.includes('node_modules/react-notion')){
					return 'react-notion'
				}
			}
		},
	},
}

✅ Notion API로 변경, 백엔드 구축

(2023/11/16) 검색기능 추가

매번 홈페이지를 관리하기에 부담을 느꼈습니다. 노션 데이터 베이스 api 활용하기로 하였습니다. Node.js + koyeb로 배포

Swagger UI ((https://developed-heath-mr-chu.koyeb.app/api-docs/)

✅ 넷틀리파이 배포로 변경

(2023/06/03) 넷틀리파이 배포로 변경, 네이버 사이트맵 추가

FE MR.CHU

추홍규 | 프론트 엔드의 홈페이지입니다.

https://mrchu.netlify.app/home

✅ 포트폴리오 타입스크립트로 변경

(2022/10/20)

1. 취직후 SEO가 너무 중요하다 생각하여 리액트에 무엇을 더 할지 고민중
2. react-snap 추가
3. 구글 사이트맵 추가
4. robots.txt 추가

✅ 포트폴리오 홈페이지를 리액트로 변경해보기

(2022/05/28) react 활용

• http://chuhongkyu.github.io/Mr_chu_HomePage

✅ 포트폴리오 홈페이지 만들기

(2021/09/25)

• html/css/js로만 만든 포트폴리오 홈페이지