chez Manon

1. getStaticPath 예시 2. fallback 동적 라우팅 페이지에서의 pre-rendering Next의 pages폴더에서 [대괄호]로 파일명을 생성하면 동적 라우팅을 할 수 있다. 이 때 주의해야 할 점은 Next는 모든 페이지를 사전생성 하지만, 동적 페이지에서는 그렇지 않다는 점이다. 동적 페이지에서 getStaticProps를 사용하여서 페이지에 진입하게 되면 아래와 같은 에러를 만나게 된다. 대괄호 [ ]로 만든 동적 페이지는 엄밀하게 따져서 하나의 페이지가 아닌 여러 페이지이다. 때문에 Next는 사전에 동적 페이지를 위해서 얼마나 많은 페이지를 미리 생성해야할지 알 수 없다. 이럴 때 비동기 함수 getStaticPaths를 이용하여 Next에게 어떤값에 대한 페이지가 pre-r..

1. Pre-rendering이 필요한 이유 2. Pre-rendering의 2가지 방식 3. Static Generation 4. Build 5. ISR 정적페이지 업데이트 Pre-rendering이 필요한 이유 SPA(Single Page Application) 인 React로 구현된 사이트는 하나의 파일로 전체 사이트(여러 페이지)를 구현한다. 즉, html 파일이 한개라는 뜻인데, 이 HTML을 JavaScript가 동적으로 만드는데 동적생성이 만들어지는 곳이 client라면 CSR(Client Side Rendering)이고 server 쪽이라면 SSR(Server Side Rendering) 이다. React는 CRA(Create React App)으로 별도의 초기 설정 없이도 CRA를 통해 ..

NextJS ➡️ 이전에는 백엔드는 GraphQL이나 Rest 사용하여 Node.JS로, 프론트는 React, Vue 등으로 만들었다. But, NextJS는 API를 만들기 위해 별도의 서버를 구축할 필요가 없이, Next만으로 풀스택 구현이 가능한 framework이다. ➡️ create-react-app에서는 모든게 CSR이다. CSR은 react코드가 불러오기전에는 화면이 그려지지 않아서 흰 화면만 보여질 수 있다는 단점이 있다. ➡️ NextJS에서는 페이지들이 미리 만들어진다. Next는 backend상에서는 ReactJS를 돌리고있고, 그동안 pre-generate(사전생성)하며 그것은 HTML페이지가 된다. js가 모두 다운로드 되어지면 모든게 일반적인 ReactJS처럼 동작하게된다. 이렇..

2022.02.15 - [REACT] - [Next.JS] Dynamic Routes [Next.JS] Dynamic Routes Next.js Next.js = React framework - Production을 위한 framework - A fullstack framework for ReactJS - NextJS solves common problems and makes building React apps easier. - React 성능을 향상시켜서 대.. manon-kim.tistory.com https://nextjs.org/ Next.js by Vercel - The React Framework Production grade React applications that scale. The wo..

Next.js의 동적라우팅 React의 코드기반의 라우팅 (react-router)와 다르게 NextJS는 파일기반으로 routing을 한다. 이는 Next의 큰 장점이라 볼 수 있는데, react에서처럼 routing을 위한 추가적인 코드가 필요없이, pages폴더에 원하는 경로대로 폴더 구조를 만들고 하위에 파일을 만들면 쉽게 routing을 할 수 있다. File-based Routing npx create-next-app //Waht is your project name? 기본 폴더 구성 : pages / public / styles 파일기반 routing : pages폴더의 파일명이 path 이름으로 사용된다. ( news.js > our-domain.com/news ) pages폴더에서 new..