Muscardinus

Next.js를 사용하지 않더라도, 우리는 meta 태그를 통해서 SEO를 최적화한다. Next.js는 이를 Head를 통해서 할 수 있다. 예시 import Head from 'next/head' function IndexPage() { return ( Hello world! ) } export default IndexPage

매번 페이지 요청 때마다, pre-render하고 싶을 때 사용한다. 그리고, component를 render하기 전에 필요한 값들을 component에 props로 전달한다. export async function getServerSideProps(context) { return { props: {}, // will be passed to the page component as props } } context 속성 params: 해당 페이지의 route parameter를 보유하고 있다. 만약 page 이름이 [id].js이면, params는 {id: ...}라고 나타날 것이다. getServerSideProps 반환값 1. props: page 컴포넌트에서 받는 props들을 나타낸다. 2. notF..

Page가 Dynamic Routes이고 getStaticProps가 있는 상태에서, 어떠한 페이지를 pre-render할 지를 알아야한다. 우리는 getStaticProps를 통하여 이를 해결할 수 있다. export async function getStaticPaths() { return { paths: [ { params: { id: '1' } }, { params: { id: '2' } } ], fallback: true, false, or 'blocking' // See the "fallback" section below }; } getStaticPaths 반환값 1. paths: 어떠한 path를 pre-render 할지를 결정한다. 예를 들어, dynamic route가 "pages/post..

When to use getStaticProps The data required to render the page is available at build time ahead of a user’s request. The data comes from a headless CMS. The data can be publicly cached (not user-specific). The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance. export async function getStaticP..