next.js4 Next.js 사이트 성능 관리 - next/dynamic 사용하기 사이트 내 js, css 등의 파일 로드 시간을 단축하기 위해 next/dynamic을 적용하고자 한다. 기존에 모듈, 컴포넌트들을 import하는 방식은 다음과 같았다. 기존 import Modal from "@/components/common/modal"; next/dynamic 적용 후 import dynamic from "next/dynamic"; const Modal = dynamic(() => import("@/components/common/modal"), { loading: () => Loading..., }); const Form = dynamic(() => import("@/components/home/form"), { loading: () => Loading..., }); const .. 2024. 3. 22. [Next.js] 웹사이트 버전 관리하기 - package.json version 설정& cookie에 버전 저장하기 ( + 버전 관리 규칙 semantic versioning ) 사이트에 지속적인 배포를 하려면 버전 관리가 필요하다. 해당 포스트는 Next.js 프로젝트에서 웹사이트 버전을 관리한 내용을 간단히 작성하였다. package.json에 버전 설정하기 package.json을 보면 위의 사진과 같이 버전 version을 설정할 수 있다. 위는 현재 웹사이트 버전을 1.0.0으로 설정하였다. 버전 설정 Semantic versioning 은 다음을 참고해 보자! 💡 웹(앱) 버전 규칙 Semantic versioning Major.Minor.Patch Major → 대규모 업데이트 사항 발생 시. 이전 버전과 호환되지 않는 정도의 큰 변화를 주는 경우 Minor → 새로운 기능을 추가할 경우 Patch → 이슈, 버그 해결 시 등 간단한 수정을 한 경우 그럼 이제 이렇게.. 2024. 2. 21. [Next.js] Next.js13 App router에 styled-components 적용하기 / global style / registry.tsx Next.js v13에서는 기존의 Pages Router와 달리 App Router 방식이 등장했다. 그리하여, 이에 따라 styled-components 설정 방식도 변경되었다. 기존 Page Router에서는 _document.jsx와 _app.jsx가 존재했으나 App router에선 사용하지 않는다. App router에선 lib/registry.jsx 와 app/layout.jsx를 사용한다. 💀 Page Router에서 styled-components를 사용하기 위한 설정 방식 //_document.jsx import { Fragment } from "react"; import Script from "next/script"; import { ServerStyleSheet } from "styl.. 2023. 7. 11. [Next.js] Error: Invalid src prop on `next/image`hostname "..." is not configure 에러 해결하기 / next.config.js 이미지 도메인 설정 Error: Invalid src prop (https://images.unsplash.com/photo-1511920170033-f8396924c348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80) on `next/image`, hostname "images.unsplash.com" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host 프로젝트 내부에 저장해 둔 사진이 아닌 외부 .. 2023. 5. 28. 이전 1 다음
