nextjs(7)
-
Next JS 13 적용해보기 - App Routing 편
해당 적용해 보기 시리즈는 12 버전을 기준으로 변경/추가된 부분에 대해 설명하고 있기 때문에 이전 버전을 사용하지 않으셨던 분들은 모르는 기능이 나왔다고 해서 당황하지 마시고 최신 버전에서는 이렇게 쓰면 되는구나 하고 넘어가시거나 필자가 이전에 작성했던 글들을 12 기준으로 작성되었기 때문에 해당 글들을 한번 보시기를 권장드립니다. [NEXT.js] 넥스트 JS를 배워보자 1편 - Pre Rendering 예전부터 꼭 배워보고 싶은 Next JS 프레임워크에 드디어 입문했다. 여태까지 관리자 페이지나 랜딩페이지를 만들다 보니 CSR(Client Side Rendering)로도 충분했지만 현재 SEO과 원할하게 이루어져야 하 mingeesuh.tistory.com 우선 Next JS 13 버전의 주요 업..
2023.03.05 -
Next JS 코드 스플리팅 적용해보기 (Dynamic Import)
이번 포스트에서는 Next JS에서 동적 불러오기(Dynamic Import)를 통해 코드분할(Code Splitting)을 적용해보도록 하겠습니다. React의 경우 모든 페이지가 하나의 페이지에서 랜더링 되는 SPA (Single Page Application)이기 때문에 코드분할을 따로 해주지 않으면 퍼포먼스에 영향이 가게 되고 이는 곧 좋지 않은 사용자 경험으로 이어지게 됩니다. 물론 한 페이지에서 실행되는 로직이 복잡하지 않다면 크게 영향을 받지는 않지만 로직이 복잡해지고 많은 양의 데이터를 불러와야 한다면 각 라우트마다 코드 스플리팅을 해주는 편이 좋습니다. 그렇다면 Next JS는 어떨까요? 넥스트 JS를 배워보자 1편 에서 언급했다시피 Next JS는 파일 시스템의 라우트를 내장하고 있기 ..
2022.07.03 -
[Next.js] 페이지 이동시 로딩 처리하기
Next JS는 SSR 프레임워크이긴 하지만 Link 컴포넌트나 Router를 통한 Client Side Navigation (페이지 전환이 JS를 통해 이루어짐)이 가능하기 때문에 페이지 이동시 CSR 앱만큼이나 좋은 UX경험을 전달할 수 있습니다. 이번 포스트에서는 Next JS에서 라우터를 통한 페이지 이동을 할 때 좋은 사용자 경험을 위해 적용할 수 있는 로딩 처리 방법에 대해 알아보겠습니다. Router 이벤트 위에서 보이는바와 같이 로딩 처리를 하고 안하고의 차이는 웹앱을 사용하는 사용자 입장에선 매우 큽니다. 가벼운 페이지나 SSG를 방식을 통해 생성된 페이지는 괜찮을 수도 있지만 서버사이드 랜더링을 해야 하는 페이지에서 좀 무거운 작업을 하게 된다면 로딩 상태를 알릴 수 있는 Spinner..
2022.04.19 -
[NEXT.js] SEO 처리하기 (feat. Head, meta 태그)
이번 포스트에서는 Next JS(서버사이드 랜더링)의 최대 장점 중 하나인 SEO를 처리하는 방법에 대해 알아보도록 하겠습니다. SEO란? 이미 Next JS를 사용하고 있거나 사용하기로 마음 먹으셨다면 SEO에 대해 알고 있을 것이라고 생각되지만, 간단하게 설명드리자면 Search Engine Optimization의 약자로 웹에 올리는 컨텐츠가 구글, 네이버, 다음 같은 검색 엔진으로부터 제대로 인식이 될 수 있도록 최적화를 하는 작업입니다. 최적화 방법에는 양질의 콘텐츠를 제공하거나, 접근성이나 성능적으로 뛰어난 웹을 개발하는 방법 등이 있지만 가장 기본적인 방법으로는 해당 페이지에 적합한 메타태그를 삽입해서 크롤러가 웹을 잘 분석해서 인덱싱 하는데 도움을 주는 방법입니다. 구글에서는 최대한 많은 ..
2022.04.16 -
[NEXT.js] 넥스트 JS를 배워보자 5편 - 배포하기 (feat. Vercel)
이번 포스트는 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에 가입이 되어있지 않다면 가입 후 프로젝트가 등록되어있는 깃 헙 계정을 연동시..
2022.04.03 -
[NEXT.js] 넥스트 JS를 배워보자 2편 - 공통 레이아웃
오늘은 Next JS에서 공통된 레이아웃 (Header, Footer 등 여러 페이지에서 반복적으로 사용되는 컴포넌트)를 정의하는 방법에 대해 설명해보려고 한다. 보통 React의 경우, import Navbar from '/Navbar' export default function Layout({ children }) { return ( {children} ) } 이런 식으로 Layout이라는 페이지 컴포넌트(이름은 상관없음)를 정의하고 그 안에 공통적으로 사용될 컴포넌트를 넣어주는 방식을 사용한다. 주로 Navbar, SideBar, Footer 이런 컴포넌트와 함께 공통적으로 들어갈 스타일링이 있다면 같이 해준다. // ...생략 // App.js export default const App = ()..
2022.02.20