Next.js 블로그 개발하기 - 0 (구상)

오유진·2023년 4월 6일
0
post-thumbnail

Next.js 블로그 개발 목표

CSR 블로그 개발일지

CSR블로그를 Next.js로 다시 만들것이다.
목표는 다음과 같다.

1. SSR과 SEO 적용하기

Next.js로 다시 만드려는 가장 큰 이유이다.
React는 SPA(Single Page Application)로 동작하기 때문에 검색 엔진 최적화가 어렵다. 그렇기 때문에 Next.js와 같은 SSR 프레임워크를 사용하여 서버에서 렌더링을 해줌으로써 SEO를 개선할 수 있다.

Next.js에서는 getServerSideProps와 getStaticProps와 같은 메소드를 제공하여 서버에서 데이터를 미리 가져와 렌더링할 수 있다. 또한, Head 컴포넌트를 사용하여 메타 데이터와 SEO 관련 정보를 설정할 수 있다.

2. 컬러 테마 적용

Chakra UI와 같은 React UI 라이브러리에서는 컬러 테마를 쉽게 적용할 수 있다.

3. 모바일 화면 구현

모바일 사용자들이 접근하기 쉽도록, 반응형 모바일 화면을 구현하는 것도 중요하다. Chakra UI에서는 Flex와 Box와 같은 레이아웃 컴포넌트를 사용하여 반응형 모바일 화면을 쉽게 구현할 수 있고, useMediaQuery로 모바일 전용 컴포넌트를 만들수도있다.

4. 로딩 컴포넌트 구현

SSR로 인해 로딩 시간이 길어질 수 있는데, 이때 로딩 컴포넌트를 사용하여 사용자가 대기 중임을 인식하도록 하는 것이 좋다.(사실 서버가 좋으면 필요없지만..) Chakra UI에서는 Spinner와 같은 로딩 컴포넌트를 제공한다.

0개의 댓글