nextjs
-
NextJS Image 태그 height auto로 사용하기Next.js 2022. 1. 11. 14:38
이 글은 NextJS 12 버전을 기반으로 작성되었습니다. 2023.08.04 - [Next.js] - Next.js Image 태그 height auto로 사용하기 (update 13 version)업데이트 된 내용은 이 글에서 확인하시기 바랍니다. NextJS 10 버전이 나오며 가장 눈에 띄었던 것은 개인적으로 Image 태그였다. Vercel로 배포하게 되면 cdn역할까지 해주며 큰 사용성을 보여주는 역할을 했는데, 생각보다 많이 사용하지만 NextJS Image태그(이하 Image 태그)에서는 사용하기 어려운 것이 있다. Public 이미지의 경우 width, height를 사용하지 않아도 사이즈가 가변적으로 잘 들어가지만 실제 서비스를 할 경우 외부에서 이미지를 가지고 오는 경우가 더욱 많기에..
-
NextJS + Redux-Toolkit + next-redux-wrapper 설정하기Next.js 2021. 9. 24. 18:33
해당 글은 next-redux-wrapper@7 버전을 기반으로 작성되었습니다. 해당 방법은 필자 개인이 설정한 방법으로 언제든 더 좋은 방법이 있다면 공유해주시기 바랍니다. NextJS의 큰 장점 중 하나인 SSR을 사용할 때 조금 더 편하게 사용하기 위해 next-redux-wrapper를 이용하여 dispatch를 사용할 수 있게 된다. // testReducer.ts export const initialState = { // ...states } export type TestReducerState = typeof initialState; const testSlice = createSlice({ name: 'user', initialState, reducers: {}, extraReducers: (..
-
NextJS Image에서 fallback 활용하기Next.js 2021. 9. 16. 12:24
NextJS@10 버전에서 나온 Image태그는 만족스러운 성능을 제공해 주지만 아쉬운 경우도 있습니다. 만약 내가 설정한 이미지가 존재하지 않을 때 대체 이미지를 보여주는 방법을 제공하지 않는다는 것이다. 나는 아래와 같은 방법을 활용하여 이미지가 존재하지 않을 때 이미지를 설정해 주었다. import React, { useState } from 'react'; import Image from 'next/image'; const ImageFallback = (props) => { const { src, fallbackSrc, ...others } = props; const [imgSrc, setImgSrc] = useState(false); const [oldSrc, setOldSrc] = useSta..
-
NextJS Firebase@9으로 migration하기Next.js 2021. 9. 14. 15:16
해당 글은 firebase@9.0.2 버전을 기준으로 작성되었습니다. 아직 공식 홈페이지에는 Beta라고 나오지만 이제 npm에서 다운로드하게 되면 자동으로 9 버전이 설치되게 된다. 내가 생각하기에 이번 버전에서 가장 큰 변경 점은 tree shaking firestore-lite 위 두가지 이다. 간단하게 테스트했을 때 번들 사이즈의 경우 8 버전 대비 40% 정도의 사이즈 감소가 있었다. 그리고 firestore-lite의 경우 크게 offline기능과 snapshot 기능을 지원하지 않는데, 9 버전과 firestore에서 lite로 변경하며 데이터를 가져오는 속도와 total blockTime이 크게 감소했다. 물론 아직 버그가 있을 수 있지만, 지금까지의 장점만으로도 충분히 버전을 올릴만한 가..
-
NextJS 외부라이브러리 Error : document(or window) is not defined 해결하기Next.js 2021. 9. 6. 16:30
NextJS로 프로젝트를 하는 중 조금 오래된 라이브러리 등을 이용할 때 NextJS의 ssr 속성 때문에 document나 window가 호출되기 전 라이브러리를 로드해서 에러가 발생하는 경우 무척 간단하게 해결 가능하다. import dynamic from 'next/dynamic' const QuillNoSSRWrapper = dynamic(import('react-quill'), { ssr: false, }) NextJS의 dynamic Import를 이용해 ssr옵션을 끄는 것으로 간단하게 해결 가능하다.
-
NextJS Image Tag Error: Invalid src prop 해결하기Next.js 2021. 9. 6. 16:02
해당 에러는 NextJS의 이미지를 태그를 이용해 외부 링크의 이미지를 불러오려고 하면 발생하는 에러이다. 이 에러는 생각보다 간단하게 해결할 수 있다. // next.config.js module.exports = { images: { domains: ['firebasestorage.googleapis.com'], }, } 나의 경우 firebase의 storage를 이용하기에 해당 도메인을 입력해 줬는데 다른 링크의 주소에서 가져온다면 해당 링크의 주소를 입력해주면 된다. 주의해야 할 점을 몇 가지 쓰자면 next.config.js에 다른 요소들도 추가 설정을 했을 때 웬만하면 가장 먼저 images 설정을 하지 않으면 인식하지 못하는 문제가 발생했다. images에 여러 옵션이 있는데, 그 중 lo..