오늘은 NEXT JS에서 커스텀 404 에러 페이지를 만드는 방법에 대해 알아보도록 하겠습니다. 일단 NEXT에서는 기본적으로 라우트 설정이 되어 있지 않는 페이지에 대해 불필요한 서버사이드 랜더링을 하지 않게 하기 위해서 아래와 같은 404 정적 오류 페이지를 보여주도록 되어있습니다. 기본 에러 페이지 자체로도 의미 전달은 충분하지만 현재 진행하고 있는 프로젝트에 따라 언어나 스타일링을 커스터마이징 해줘야 할 필요가 생기기 마련입니다. 404 페이지 커스터마이징하기 기존 에러 페이지를 사용하지 않고 커스터마이징 하기 위해선 pages 폴더에 404.js (또는 ts 파일)을 만들어주시기만 하면 됩니다. (페이지 컴포넌트 이름은 상관없지만 반드시 파일 이름은 404.js로 지정해주셔야 합니다). 해당 4..

얼마전에 Next JS로 진행하고 있는 프로젝트에 채널톡을 추가하게 되었는데 스크립트 추가하는 방법에 대한 글이 없어서 필자가 채널톡을 추가할때 사용한 방법을 해당 포스트에서 공유해드리고자 합니다. 채널톡 스크립트 추가하기채널톡은 플러그인 스크립트를 통해 추가 해줄 수가 있는데 현재 개발자 문서에서 안내하는 두가지 방법으로는 정적페이지일 경우 index.html에 script를 즉시실행함수 형식으로 추가해주는 방식과 SPA(Single Page Application)일 경우 클래스로 관리를 해서 DOM이 생성된 경우 스크립트를 추가하는 방법이 있습니다. Next JS는 정확하게 구분하면 정적 페이지도 아니고 SPA도 아니지만 조금 변형해서 두가지 방법 모두 사용 가능합니다. dangerouslySetIn..

오늘은 Image 컴포넌트를 이용해 배경 처리를 하는 방법을 알아보겠습니다. Next의 Image 컴포넌트를 사용하지 않고 css의 background-image 속성을 사용해 배경 처리를 해줄 수도 있지만 이럴 경우 resizing을 별도로 처리해줘야 하기 때문에 이미지 최적화를 자체적으로 지원하는 Image 컴포넌트를 사용해서 배경 처리를 해주도록 하겠습니다. Image 컴포넌트에 관한 포스트를 아직 읽지 않았다면 아래 링크를 참고해주세요. [NEXT.js] 넥스트 JS를 배워보자 3편 - 최적화된 이미지 컴포넌트 개인적으로 Next JS를 처음 접했을 때 가장 흥미로웠던 건 이미지 최적화 (Image Optimization) 관련 부분이었다. 그냥 React로 이미지 처리를 해야할 경우 뷰포트에 따..

넥스트 JS의 또 하나의 장점으로는 API 라우트 기능을 통해 API 엔드포인트를 클라이언트 코드와 함께 작성할 수 있다는 점이다. 물론 한 곳에서 작성만 할 수 있을 뿐이지 백엔드에서 실행되어야 할 코드가 클라이언트에서 실행되는 것은 아니다. 해당 라우트에 작성한 코드들은 클라이언트 번들 사이즈에 포함되지 않기 때문에 추후 별도로 배포를 할 수도 있고 serverless 함수 형식 구글의 cloud function이나 aws의 lambda)처럼 관리할 수도 있다. API Routes 사용해서 REST API 구현해보기 기존 예제 프로젝트에서는 JSON placeholder REST API포인트에 요청해서 포스트를 불러오는 방식으로 진행했는데 이번에는 API Routes를 사용해서 직접 엔드포인트를 구축..