Front-End/Next.js4 Next 13 에서의 Data fetching https://velog.io/@xmun74/Data-Fetching-getStaticProps-getStaticPaths-getServerSideProps Next.js 13 버전 - Data Fetching SSG: Static-Site Generation 정적사이트 생성빌드 시 html 생성해두고 요청이 오면 생성해둔 html 재사용SSR: Server-Side Rendering 서버사이드 렌더링SEO 성능 향상시키고 요청마다 데이터를 최신상태로 업데이 velog.io 이전 글에서도 간략히 언급했지만, Next 13에서는 fetch API 를 활용할 수 있게 되면서 getServersideProps 등의 SSR, SSG 옵션이 fetch 의 cache option 으로 변경되었다. 이전버전과 자세하.. 2023. 10. 19. Next 13에서 변경된 사항들 https://abangpa1ace.tistory.com/entry/Nextjs-Nextjs-13-%EB%B3%80%EA%B2%BD%EC%82%AC%ED%95%AD [Next.js] Next.js 13 변경사항 🤍 Next.js 13 Next.js 12버전도 2021년 중순 업데이트 된 것으로 기억하는데, Next.js 13이 2022년 10월에 컨퍼런스에서 다시 발표됬다. 체감상 가장 큰 변화를 느낄 것 같은 버전 체인지이다. (디렉토리 구 abangpa1ace.tistory.com 특히 opengraphy vercel/og 가 매우 인상깊고, SSR 을 기본으로 하면서 getServersideProps 등이 cache 로 바뀐 점도 인상깊다. 위 블로그에서 변경사항 요약을 간단히 기재하면, 8. 주요.. 2023. 10. 13. @next/font 를 사용해서 구글 폰트 적용하기 Next.js 13 버전부터 @next/font 가 추가되었다. CSS 의 @font-face 설정방법 외에도 @next/font를 사용하면 컴포넌트 내에서 fontFamily를 javascript로 적용할 수 있다. Next 공식 문서에서는 친절히도 아래와 같이 유튜브 영상을 소개하고 있다. https://www.youtube.com/watch?v=L8_98i_bMMA 사용방법 npm install로 @next/font를 설치한다. create next-app을 한 경우에는 샘플에 이미 포함되어 있어 별도 설치가 필요 없다. npm install @next/font 적용하고자 하는 page에 아래와 같이 적용할 수 있다. 아래는 공식문서에 있는 Inter 폰트 적용 예시이다. 간단히 className을.. 2023. 1. 11. front-matter MD(MarkDown) 파일의 메타데이터를 정의하는 부분으로 볼 수 있다. 마크다운 파일의 가장 상단에 위치 하고 아래와 같은 양식을 가진다. --- title: Blogging with VuePress lang: en-US --- 시작과 끝을 ---로 구분해주어야 하며, 키:밸류 의 쌍으로 표현이 된다. next.js는 기본적으로 front-matter를 지원하지 않기 때문에 gray-matter 와 같은 라이브러리를 사용해야한다. 2022. 11. 1. 이전 1 다음