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를 통해 ..

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..