이번 포스트에서는 Next JS에서 동적 불러오기(Dynamic Import)를 통해 코드분할(Code Splitting)을 적용해보도록 하겠습니다. React의 경우 모든 페이지가 하나의 페이지에서 랜더링 되는 SPA (Single Page Application)이기 때문에 코드분할을 따로 해주지 않으면 퍼포먼스에 영향이 가게 되고 이는 곧 좋지 않은 사용자 경험으로 이어지게 됩니다. 물론 한 페이지에서 실행되는 로직이 복잡하지 않다면 크게 영향을 받지는 않지만 로직이 복잡해지고 많은 양의 데이터를 불러와야 한다면 각 라우트마다 코드 스플리팅을 해주는 편이 좋습니다. 그렇다면 Next JS는 어떨까요? 넥스트 JS를 배워보자 1편 에서 언급했다시피 Next JS는 파일 시스템의 라우트를 내장하고 있기 ..

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

Next JS는 SSR 프레임워크이긴 하지만 Link 컴포넌트나 Router를 통한 Client Side Navigation (페이지 전환이 JS를 통해 이루어짐)이 가능하기 때문에 페이지 이동시 CSR 앱만큼이나 좋은 UX경험을 전달할 수 있습니다. 이번 포스트에서는 Next JS에서 라우터를 통한 페이지 이동을 할 때 좋은 사용자 경험을 위해 적용할 수 있는 로딩 처리 방법에 대해 알아보겠습니다. Router 이벤트 위에서 보이는바와 같이 로딩 처리를 하고 안하고의 차이는 웹앱을 사용하는 사용자 입장에선 매우 큽니다. 가벼운 페이지나 SSG를 방식을 통해 생성된 페이지는 괜찮을 수도 있지만 서버사이드 랜더링을 해야 하는 페이지에서 좀 무거운 작업을 하게 된다면 로딩 상태를 알릴 수 있는 Spinner..

이번 포스트에서는 Next JS(서버사이드 랜더링)의 최대 장점 중 하나인 SEO를 처리하는 방법에 대해 알아보도록 하겠습니다. SEO란? 이미 Next JS를 사용하고 있거나 사용하기로 마음 먹으셨다면 SEO에 대해 알고 있을 것이라고 생각되지만, 간단하게 설명드리자면 Search Engine Optimization의 약자로 웹에 올리는 컨텐츠가 구글, 네이버, 다음 같은 검색 엔진으로부터 제대로 인식이 될 수 있도록 최적화를 하는 작업입니다. 최적화 방법에는 양질의 콘텐츠를 제공하거나, 접근성이나 성능적으로 뛰어난 웹을 개발하는 방법 등이 있지만 가장 기본적인 방법으로는 해당 페이지에 적합한 메타태그를 삽입해서 크롤러가 웹을 잘 분석해서 인덱싱 하는데 도움을 주는 방법입니다. 구글에서는 최대한 많은 ..

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

이번 포스트는 NEXT JS를 배워보자 시리즈의 마지막 편인 배포로 마무리를 해보겠습니다. . Next JS 앱을 배포하는 방법은 여러 가지가 있지만 현재 프로젝트의 규모가 작기 때문에 NEXT팀이 만든 빌드, 배포, 호스팅 서비스인 Varcel을 사용해서 간단하게 배포해보도록 하겠습니다. 1. 깃헙 계정 등록 및 레포 불러오기 New Project – Vercel Let's build something new. To deploy a new Project, import an existing Git Repository or get started with one of our Templates. vercel.com 아직 Varcel에 가입이 되어있지 않다면 가입 후 프로젝트가 등록되어있는 깃 헙 계정을 연동시..