NextJS with TypeScript
1.[Next.JS] 소개
NextJS는 React 프레임워크다. 말 그대로 React 앱을 더 편리하게 구축할 수 있도록 많은 기능을 제공한다. NextJS는 React 앱에 많은 기능을 간단히 추가할 수 있다. 예를들면 React에서 라우팅을 하기 위해서 react-router 라이브러리를 설치해야 했는데 NextJS를 사용한다면 NextJS에서 제공하는 라우팅을 사용하면 된다...
2.[NextJS] 프로젝트 생성 with TypeScript
프로젝트 생성 NextJS + TypeScript 프로젝트를 생성해보자. 터미널에 아래 명령어를 입력한다. 해당 명령어를 입력하고 프로젝트 폴더로 이동하면 아래와 같은 구조로 프로젝트가 생성된다. 여기서 중요한 폴더는 pages public styles 가 있다.
3.[NextJS] SSG (Static-Site-Generation)
React vs Next React: CSR(Client Side Rendering) Next: SSR(Server Side Rendering), SSG(Server Side Generation) 리액트는 CSR 방식이다. 우선 빈 HTML 파일을 먼저 받고(pub
4.[NextJS] SSR (Server-Side-Rendering)
SSR SSR은 사용자가 page request를 할때마다 서버에서 HTML을 동적으로 생성하여 제공한다 이러한 경우는 항상 최신 상태를 유지해야하는 웹 페이지나, 분석 차트, 게시판 등, 사용자의 요청마다 동적으로 페이지를 생성해 다른 내용을 보여주어야 하는 경우
5.[NextJS] Client-Side Data Fetching
클라이언트 사이드 데이터 페칭 Next.js 애플리케이션을 개발하다 보면 사전 렌더링을 할 필요가 없거나 사전 렌더링을 할 수 없는 데이터를 다루게 되는 경우도 있다 아래와 같은 경우에는 클라이언트 사이드 데이터 페칭을 고려해 볼 만한 예시이다 > - 갱신 주기가
6.Next.js 폰트 최적화
next.js의 13버전에서는 폰트 최적화를 지원함.next/font에는 모든 폰트 파일에 대한 내장 자체 호스팅이 포함되어 있다.이 새로운 폰트 시스템은 성능과 개인 정보 보호를 고려하여 모든 Google 폰트를 편리하게 사용할 수 있게 한다.CSS 및 폰트 파일은