dev_eun

Dynamic Routes /posts/:id 경로의 post를 라우팅하고 싶을 경우 pages/posts/[id].ts 파일을 생성 getStaticPaths()가 id 값들의 리스트를 반환 리스트 원소의 타입은 object이다. 그리고 이 객체는 반드시 params안에 key가 id인 객체를 가지고 있어야 한다. return fileNames.map(fileName => { return { params: { id: fileName.replace(/\.md$/, '') } } }) filename([id].js)의 id와 같은 key여야 한다. getStaticProps()가 id에 필요한 데이터들을 fetch getStaticPaths() Fallback fallback: false일 ..

Pre-rendering Next.js는 기본적으로 모든 페이지마다 pre-rendering한다. 이것은 CSR보다 SEO가 더 좋다는 말! 각 HTML은 해당 페이지에 필요한 js코드와 연관되어 있다. 페이지가 브라우저에 의해 로드되었을 때, js 코드가 실행되고 페이지를 인터렉티브하게 만든다.(이 과정을 hydration이라고 함) 순수 React 앱이었으면 아마 로딩도 되지 않았을 거다. 왜냐면 React.js는 pre-rendering하지 않기 때문. Next.js에는 Static Generation과 Server-side Rendering 두 가지 방법이 있으며 페이지마다 다르게 적용할 수 있다. Static Generation build타임에 HTML을 생성하는 방법이다. pre-render된..

Page끼리 이동하기(Navigate) Pages /pages 디렉토리에 있는 파일로부터 export된 React Component가 페이지가 된다. pages/index.js => / route pages/posts/first-post.js => /posts/first-post route Link Link 컴포넌트 안에는 a태그가 가장 상위에 있어야 한다. href 속성을 사용하여 다른 페이지로 라우팅할 수 있다. 만약 내부 라우트가 아닌 외부 페이지로 링크하고 싶다면 Link가 아닌 a 태그를 사용한다. 그리고 className같은 속성을 사용해야 할 경우 Link가 아닌 a 태그에 추가해야 한다. import Link from 'next/link' this page! Client-side Navig..