Next.js
1.Next.js 기초 (Routing)
간략하게 프로젝트의 폴더 구조를 살펴보겠습니다.처음 Next.js 프로젝트를 생성하게 되면 하위 폴더로 pages,public,styles가 생성된 것을 볼 수 있는데요.먼저 public에는 index.html이 없습니다. 이전 글에서도 언급을 했습니다. Next.js
2.Next.js에 대해서 알아보자. (간결)
홈페이지 대문에는 이렇게 적혀있습니다. The React Framework for Production.React의 프레임워크라고 나와있네요. 그렇다면 React는 무엇일까요?A JavaScript library for building user interfaces사용자
3.[Next.js] Data Fetching - getStaticProps / SSG / Static-site Generation
Next.js의 Pre-rendering 방식과 문제점을 해결하는 SSR에 대해서
4.[Next.js] 동적 라우팅(Catch all routes)
Next.js의 동적 라우팅에서 점 세개('...')를 사용해서 모든 path를 잡을 수 있습니다.pages/post/\[...slug].js 라는 파일은 '/post/a'라는 url path와 매칭됩니다. 또한 뒤에 추가로 붙는 path도 잡을 수 있습니다.예를 들어
5.[Next.js]Layout 추가하기
Next.js 의 파일 구조를 보면 pages 내부에 기본적으로 \_app.js 와 index.js가 있습니다. \_app.js는 루트 컴포넌트이며 여러 페이지 컴포넌트(index.js와 같은)들을 렌더링 하게 됩니다. 만약 앱의 모든 페이지에 네비게이션 바를 추가하고
6.[Next.js] Data Fetching -Incremental Static Regeneration(ISR)
getStaticProps를 사용해서 프로젝트를 Build 하면 서버 사이드 렌더링을 할 수 있다. 하지만 이 방법은 프로젝트가 Build 될 때 정적 페이지가 만들어지는 방식이다. 만약 데이터가 자주 바뀌어야 하는 상황이라면, 데이터가 바뀔때마다 Build 해야하므
7.[Next.js] Data Fetching - getStaticPaths
만약 페이지가 동적 라우팅을 하고 있고 getStaticProps()를 사용한다고 했을때 주의할 점이 있습니다. Next.js는 이 동적 페이지가 몇개나 필요할지 모르기 때문에 정적으로 생성해줄 path들을 정의해주어야 합니다.동적 라우팅을 하는 페이지에서 getSta
8.[Next.js] Head 컴포넌트 사용하기
Next.js의 Head 컴포넌트를 사용해 title과 meta 태그를 추가해보자