반응형 Next.js14 Next에서 Sharp로 이미지 로드하기 Sharp Sharp는 Node.js의 빠른 오픈 소스 이미지 처리 모듈이다. 압축되지 않은 이미지 데이터의 일부 영역만 메모리에 저장하므로 처리 속도가 빠르다. Sharp는 여러 이미지 형식(JPEG,PNG,GIF,Webp,Avif,SVG)과 압축되지 않은 원시 픽셀 데이터도 지원한다. (Node.js 버전 10 이상을 권장한다.) 단, OS간의 호환성이슈가 있음을 유의해야 한다. 예를들어 로컬이 윈도우, 배포시 사용하는 aws 환경이 리눅스라면 로컬에서 다운받은 윈도우 환경의 Sharp는 배포시(혹은 후에) 리눅스 환경에서 찾아지지 않는 경우도 있다고 한다. Next/Image next/image는 Next.js에서 제공하는 Image 최적화 컴포넌트이다. 이때 최적화를 위해 sharp와 squoos.. 2023. 6. 1. next에서 styled-component에 SSR 적용하는 방법 Styled-component와 Next styled-component는 CSS-in-JS이다. 즉 JS를 통해서 CSS를 작성할 수 있게 도와주는 라이브러리이다. 한편 SSR은 자바스크립트가 실행되기 전, 서버에서 만들어준 html을 미리 렌더링하는 방식이고 Next.js는 React를 SSR로 렌더링 할 수 있게 만들어주는 프레임워크이다. 그럼 next에서 CSS-in-JS인 styled-component로 무언가를 작성했을때, 어떻게 SSR로 렌더링시킬 수 있을까?? .babelrc 설정 .babelrc 는 하위디렉토리나 파일에서 특정 플러그인이나 특정 규칙을 실행할 때 사용한다. (bebel 잘 설명해 놓은 블로그 참고) 예를 들어 특정 플러그인이 프로젝트내에서 트랜스파일링되지 않거나 특정 규칙으.. 2023. 6. 1. getStaticPaths의 fallback Nextjs는 getStaticPaths에 정의된 path들을 정적으로 프리렌더링한다. 즉, 동적라우팅을 사용할 때 어떤 페이지를 미리 Static으로 생성할지 정하는 api이다. (정적으로 프리렌더링 한다는 뜻은 빌드타임시에 만들어놓고 계속 가져다 쓴다는 뜻 SSR은 매 요청시마다 새로 만듬) //posts/[id].js export async function getStaticPaths() { // const paths = getAllPostIds(); const paths = [ { params: { id: 'ssg-ssr' } } ]; return { paths, fallback: boolean 혹은 'blocking' }; } 이때 getStaticPaths의 리턴값에 fallback은 무엇일까 .. 2022. 9. 20. Shallow routing을 사용하면 리렌더링, 데이터페칭없이 페이지이동 가능 구구절절 설명하기보다 코드랑 gif로 설명이 가능하다. // src/pages/settings/my/[info].js import { useRouter } from 'next/router' import React, { useState } from 'react' import GeneralHeader from '../../../components/GeneralHeader' import Layout from '../../../components/Layout' //서버에서 data fetching 여부를 확인하기 위해 콘솔로그만 작성 export async function getStaticProps() { console.log('server') return { props: {}, } } //getStaticPa.. 2022. 9. 16. 이전 1 2 3 4 다음 반응형
