[NextJs]

Nextjs공식 웹페이지 NextJS 공식 웹사이트에 접속하면 웹을 위한 React framework라고 명시되어있다. 말 그대로 대규모의 양산형 React 앱을 더 편리하게 구축할 수 있도록 많은 기능을 제공하고 있습니다.  또한 NextJs를 프레임워크라고 얘기하

NextJs에서는 13버전이 업데이트 되면서부터 모든 컴포넌트가 기본적으로 서버 컴포넌트다. NextJs에서는 서버 컴포넌트와 클라이언트 컴포넌트가 있으며, 이를 잘 이해하고 사용하는 것이 중요할 것 것아 정리하게 되었다.NextJs공식문서 위와 같이 NextJs에서

🔴 LightHouse > LightHouse는 웹 사이트의 성능 및 품질을 평가하고 개선하는 도구이다. Google이 개발하였으며 사용자 경험, 성능, 접근성, SEO 등 다양한 측면을 평가할 수 있도록 도와준다. 간단히 이 정도만 알아보고 실제 어떻게 평가가 이

🔴 Bundle Analyzer > > > nextJs앱에서 npm run build를 하게 되면 다음과 같이 크기를 알려주지만 정확히 어떤 것이 얼마나 크기를 차지하고 있는지 모른다. 이를 위해 Bundle Analyzer를 통해 알아봐 번들 크기를 줄일 필요가

nextJs앱에서 npm run build를 하게 되면 다음과 같이 크기를 알려주지만 정확히 어떤 것이 얼마나 크기를 차지하고 있는지 모른다. 이를 위해 Bundle Analyzer를 통해 알아봐 번들 크기를 줄일 필요가 있다.   위와 같이 설치를 시작한다.  다음과

 다음과 같이 submit될 때 router.push를 이용해 input에 있는 keyword로 /search/${keyword}로 라우팅 되게끔 처리했다. 폴더 처리는 이와 같이slug를 활용해 구성했다. 그리고 다음 그림과 같이 PageTitle.tsx 컴포넌트를

 NextJs에서는 기본적으로 Not Found페이지를 제공한다. Not Found는 보통 사용자가 존재하지 않는 url로 접근하면 보여주는 사용자 측면에 특화 되어야 하는 페이지이다. 하지만 이런 기본적인 화면만 보여주게 되면 사용자 경험적인 측면을 간과하게 된다.

  다음과 같이 다크 모드 적용을 위해 localstorage에 theme 저장 후 이 값을 가져와서 새로고침이 되더라도 theme를 유지하려 했다. 그런데 위와 같이 localStorage를 찾지 못하고 있어서 문제 해결에 어려움이 있었다. 왜 localStorage

🔴 컴포넌트 > React에서 컴포넌트는 재사용 가능한 요소이다. 클래스 컴포넌트와 함수 컴포넌트는 둘 다 React 컴포넌트를 생성하는 두 가지 주요 방법이다. react에서 컴포넌트를 구성할 때 초창기에는 클래스형 컴포넌트를 사용하여 개발을 하였다. 그리고 Re

nextJS 13버전이후로 font를 가져오는데 최적화 해주는 기능이 추가 되었다. 이를 알아보고 적용해보는 시간을 가졌다.구글 폰트 접속하여 원하는 font를 적용할 수 있다. nextJs 13버전에 추가된 next/font/google은 추가적인 패키지를 설치하지

🔴 NextJs로 마이그레이션 하게 된 이유?  5월경 React로 했던 프로젝트에서 Nextjs로 마이그래이션하며 작업을 해왔다. SSR에 대한 개념은 어느 정도 알고 있었지만 NextJs가 13버전으로 바뀌고 나서의 자료 찾기가 쉽지는 않았지만 열심히

 기존에 제가 진행했던 프로젝트는 아직 배포되어 운영중이였고 웹 사이트 특성상 서비스 지향적(B-to-C)느낌이 강하여 사용자들이 쉽게 웹사이트에 접근 할 수 있고 노출이 되어야 할 필요성이 있습니다. 따라서 SEO(검색엔진 최적화)를 신경써야 했습니다. 구