프론트엔드/Next.js

Next.js build시 Image Optimization 설정 에러

에러 Next.js에서 build시에 생긴 에러입니다. 에러 내용을 확인해보면 next.config.js를 확인하라는 것 같습니다. 이미지 로더를 변경해주면 될 것 같습니다. 아래와 같이 loader = "akamai"로 해주고 path 까지 설정해준다면 정상적으로 빌드가 동작합니다. // next.config.js module.exports = { images: { loader: "akamai", path: "/", } } 그리고 에러내용대로 images.upoptimized = true로 만들어주는 방법도 있을 것 같습니다. // next.config.js module.exports = { images: { unoptimized: true } } 참조 https://stackoverflow.com/q..

Next.js ISR와 React Query 연동

Next.js에서 ISR과 React Query를 연동하는 방법에 대해서 알아보려합니다 그전에 우선 렌더링 방식에 대한 간단한 설명부터 하겠습니다 렌더링 방식 CSR(Client Side Rendering) 웹페이지의 내용을 클라이언트에서 렌더링하는 방식임 렌더링의 책임을 사용자에게 전가하는 것 화면 로딩이 사용자 눈에 보여서 사용자 경험을 감소시키는 단점이 있음 SSR(Server Side Rendering) 웹페이지의 내용을 서버 측에서 렌더링한 후 완성된 HTML 파일을 클라이언트에 전달함 프론트엔드 서버에게 렌더링의 책임을 전가하는 것 사용자가 웹에 접속할때마다 새로운 페이지를 생성해줌 항상 최신 정보를 유지해야한다면 좋은 방식 페이지가 즉시 보이지만 서버가 부하를 감당해야한다는 단점이 있음 근데..

Nextron(eletron) IPC 통신

Nextron에서 IPC 통신을 하는 방법에 대해 알아보려합니다 Nextron에는 Main과 Renderer 프로세스로 나뉘어 있는데 IPC 모듈 또한 ipcMain과 ipcRenderer 두가지 모듈로 나뉘어 있습니다 ipcRenderer Main 프로세스로 메시지를 보내고 응답받습니다 // home.tsx ipcRenderer.send("publish-board", board); // 1 ipcRenderer.on("publish-board-result", (event, res) => { // 4 console.log(res); });ipcMain Renderer 프로세스로부터 응답을 받고 메시지를 전달받을 수 있습니다 // background.ts ipcMain.on("publish-board", ..

Next.js SSG에 대해서 알아보자

우선 Next.js는 React 기반의 프레임워크이며 SSR(Server Side Rendering)과 SSG(Static Site Generation) 두가지 방식을 모두 지원합니다. 여기서 SSG만 우선 알아보겠습니다. SSG란, 빌드 타임에 웹 페이지를 미리 렌더링하여 정적 파일로 생성하는 방식입니다. 이를 통해 빠른 페이지 로딩 속도와 SEO 향상을 기대할 수 있습니다. Next.js에서 SSG를 사용하려면, getStaticProps() 메서드를 사용해 데이터를 불러오고, 이를 페이지 컴포넌트의 props로 전달해주면 됩니다. 이때, 빌드 타임에만 데이터를 불러오기 때문에, 데이터베이스나 외부 API에 대한 요청이 필요한 경우, 빌드 시점에서 처리해줘야 합니다. SSG의 가장 큰 장점은 빠른 로..

Next.js에서 미디어쿼리 (반응형) 적용하기

서버사이드 렌더링으로 인해 Next.js에서 반응형을 구현하는데는 불편함이 따른다 그래서 dynamic import나 getInitialProps를 사용해서 해결하지만 이건 SEO를 포기한다는 단점이 있어 Next.js를 사용하는 이유 자체가 퇴색되는 느낌이 들어 새로운 방식을 찾아봤다 const [isMobile, setIsMobile] = useState(false); const mobile = useMediaQuery({ query: "(max-width: 767px" }); useEffect(() => { if (mobile) { setIsMobile(mobile); } }, [mobile]);이 방법은 react-responsive 라이브러리를 사용해서 구현한 방식으로 렌더링될때 mobile값이..

Next/image가 외부 이미지를 import 해오지 못하는 문제

lostgold 페이지 작업중에 OpenAPI에서 받아온 외부 이미지를 Next/Image src에 지정해줬더니 다음과 같은 에러가 발생했다 On one of your pages that leverages the next/image component, you passed a src value that uses a hostname in the URL that isn't defined in the images.domains config in next.config.js. src에 들어가는 도메인을 next.config.js에 미리 정의해줘야 한다고 한다. 다음과 같은 방법으로 해결했다. 해결방법 우선 next.config.js 파일에 들어가서 다음과 같이 domains를 정의해주었다 const nextConf..

Next.js Pre-rendering(프리 렌더링)

Next.js가 React보다 SEO에 강한 이유는 React는 자바스크립트를 통해 HTML을 구성하기에 크롤러가 URL로 접근해도 HTML 내용을 알수가 없어 정적 HTML보다 SEO가 약하기 때문이다 그렇다면 Next.js에 SSR 방식을 알아보자 Pre-rendering 결론적으로 SSR을 사용하면 크롤러가 HTML 내용을 읽을 수 있어 SEO에 유리하다 Next.js에서는 Pre-rendering 사용하기 때문인데 Pre-rendering은 다음과 같다 클라이언트에 보내주기 전에 이미 완성된 HTML문서를 보내는 방식이다 이렇게 정적인 HTML를 받을 수 있기에 SEO에 유리하다

Next.js에서 SEO 적용하기 ( Next-SEO )

Next.js에서 Meta 태그를 사용해서 스크립트를 작성할 수 있지만 좋은 방식이 아닐 뿐더러 더 편한 방법이 존재합니다 next-seo 라는 라이브러리를 통해서 쉽게 적용가능합니다 코드는 다음과 같습니다 저는 _app.tsx에 적용하기 위해 DefaultSeo를 사용했습니다

Nextjs에서 Redux-persist + Next Redux Wrapper 적용하기

새로고침되도 리덕스값이 날아가지 않게 하기 위해 + 추후에 로그인 구현을 위해 Redux-persist와 Next Redux Wrapper를 적용하면서 정리하는 글입니다 Redux-persist 설치는 명령어입니다 yarn add redux-persist Next Redux Wrapper까지 적용한 전체 코드입니다 import { createStore, applyMiddleware, combineReducers } from "redux"; import { HYDRATE, createWrapper } from "next-redux-wrapper"; import { persistReducer, PersistConfig } from "redux-persist"; import storage from "redux..

Nextjs cache gitignore 배포 적용 문제 해결

Next.js에서 업로드시 gitignore가 적용되지 않는 문제가 있었습니다 해결방법은 다음과 같습니다 git rm -rf --cached . git add . git commit -m '메시지 작성'