개요커스텀모달이 필요할 것 같아 모달 관련 라이브러리를 사용하지 않고 Redux-toolkit을 이용해서 직접 만들려고 하니 오류가 저를 기쁘게 반겨주었습니다.A non-serializable value was detected in an action, in the path: `payload.Component`. Value: ƒ Login(param) { let { isOpen, onClose } = param; _s(); const { register, handleSubmit } = (0,react_hook_form__WEBPACK_IMPORTED_MODULE_6__.useForm)(); const router = (0,next_navigation_… Take a look at th..

개요React일 경우 저는 http-middleware-proxy을 이용한 방법을 자주 사용했습니다. Next.js에서는 다른 방식을 사용해야 했습니다. 해결방안next.js에서는 next.config.mjs에서 rewrites을 추가해서 해당 주소로 요청을 보낼 때 cors 우회를 할 수 있었습니다./** @type {import('next').NextConfig} */const nextConfig = { async rewrites(){ return [ { source: '/api/:path*', destination: `요청주소/:path*`, }, ] }};export d..

개요북마크나 검색버튼등 여러 아이콘을 SVG로 가져올려고 하는데 이미지 형식이 아닌 컴포넌트 형식으로 가져와야 할 경우가 발생했습니다. React에서는 import { ReactComponent as 컴포넌트명 } from "이미지.svg" 이 형식으로 불러왔었는데 Next.js는 다른 방식으로 불러오는 것 같았습니다.   해결방안가져오기에 앞서 @svgr/webpack을 패키지매니저로 설치해주고 next.js에서는 next.config.mjs에서 설정을 해줘야합니다.const nextConfig = { webpack(config){ config.module.rules.push({ test : "/\.svg$/, use : ["@svgr/webpack"] ..

개요next.js에서 toast-ui-editor을 사용할 때 SSR 오류가 발생하는 오류가 있습니다.toast-ui-editor는 ssr을 지원하지 않기 때문입니다. 굳이 지원할 필요도 없기도 해요  해결방안next.js에서 지원해주고 있는 dynamic import을 통해서 ssr 설정을 꺼준 채 불러와 주면 됩니다.const NoSsrEditor = dynamic(()=>import("@components/post/NoSsrEditor"),{ssr : false});Editor의 ssr을 꺼주기 위해서 Editor을 감싸줄 컴포넌트를 생성하고 NoSsrEditor라는 이름으로  dynamic을 이용해서 ssr 을 false로 해서 import 해주었습니다.  NoSsrEditor의 실제코드는 이렇습..

개요개인 프로젝트를 통해서 카카오 로그인기능이 필요할 것 같아 카카오 로그인을 구현해 볼려고 합니다.Next-auth 라이브러리를 통해서 카카오 로그인을 간편하게 구현할 수 있어 Next-auth을 사용할 겁니다.   Next-auth 설치 전Next-auth을 설치하기 전에 Next는 14 버전을 사용합니다 Router 방식은 Pages Router로 해볼려고 합니다.다음에 기회가 된다면 App Router 버전으로도 올려볼까 합니다.  Next.js 프로젝트를 설치해 줍니다.npx create-next-app@latest기본설정은 이렇게 했습니다. 원하는 설정으로 하시면 될 것 같아용  Next-auth 설치npm install next-auth next-auth을 설치를 해주시고 pages rout..