전체 글 (293) 썸네일형 리스트형 NextJS Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component Before 코드는 프로젝트 app 폴더 내의 Layout관련 코드이다. 이에 RecoilRoot를 심게 되면 "use client" 관련 에러가 등장한다. 임시방편으로 상단에 표시하긴 했지만, Layout에서 metadata를 생성하는게 가장 효율적이라고 하여 metadata를 Layout에 추가시 "use client"를 제거하라는 에러가 떴다. 이를 해결하기 위해 여러가지 방법을 찾아봤지만 답을 얻을수 없었다. 그러다가 우연히 NextJS docs 에서 해결방법을 찾았고, 하단 링크에서 참고하였다. 결론적으로는 Layout을 랩핑하는 코드를 작성하여 최상단에 "use client"를 작성하라는 의미였다. 참고하면 좋을것 같아 하단 코드를 남겼다. 참고링크: https://nextjs.org/docs.. nextJS redirecting이 안먹힐 경우 ! /** @type {import('next').NextConfig} */ const nextConfig = { async redirects() { return [ { source: '/', destination: '/hire', basePath: false, permanent: false, }, ]; }, }; module.exports = nextConfig; next13의 리다이렉팅은 next.config.js에서 설정할수 있다. 상단 코드와 같이 작성했는데, 필자는 처음에 /test 페이지로 destination을 설치했다가 테스트 해볼겸 /hire로 destination을 설정을 했지만, 계속해서 /test페이지로 리다이렉팅 되었다. build파일도 비우고 browser data도 비워도 동일한 .. Daisyui input focus시 ring 없애는 코드 { console.log(e.target) } /> 참조: https://daisyui.com/docs/customize/ nextjs tailwind 사용하여 두줄 이상 길어질 경우 {evaluation?.recommend} line-clamp class를 활용하면 하단과 같이 원하는 줄에서 말줄임표를 사용할수 있다. ` 안녕하세요 반갑습니다.저는... ` [Next.JS]node_modules/react-redux/lib/components/Context.js redux-toolkit 연동하면서 react 호환성 과 관련되어있는 듯한 에러가 발생 =>Provider 와 사용할 페이지에 "use client" 추가하여 해결 //provider.tsx "use client"; import { Provider } from "react-redux"; import store from "./store"; export function Providers({ children }: { children: React.ReactNode }) { return {children}; } //page.tsx "use client"; import { useAppSelector } from "@/redux/hooks"; import Image from "next/image"; export de.. Cannot find type definition file for 'hoist-non-react-statics'. Cannot find type definition file for 'hoist-non-react-statics'. The file is in the program because: Entry point for implicit type library 'hoist-non-react-statics' 위와 같은 에러가 있을 경우 여러가지 경우의 수가 있지만, 나의 경우 package.json의 노드버전이 맞지 않아서 에러가 생기는 경우였다. nestjs emotion 적용안되는 이슈 해결 emotion 실행이 안돼서 이리저리 구글링해서 알아보니, 의존성으로 설치해야하는 plugin이 추가로 있는것 같아 추가하였다. 더불어 tsconfig도 옵션을 추가하였다. //package.json "dependencies": { "@emotion/babel-plugin": "^11.11.0", "@emotion/babel-preset-css-prop": "^11.11.0", "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", //tsconfig.json "jsxImportSource": "@emotion/react", "paths": { "@/*": ["./src/*"] } //실행되는 component import { css } from "@.. '{ children: Element[]; css: SerializedStyles; }' 형식은 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' 형식에 할당할 수 없습니다. 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>' 형식에 'css' 속.. nextjs emotion 적용시 에러 => tsconfig 설정 추가 후 해결 import { css } from "@emotion/react"; [...] [...] //tsconfig.json { "compilerOptions": { [...] "types": ["@emotion/react/types/css-prop"], // "paths": { "@/*": ["./src/*"] } }, [...] } 이전 1 2 3 4 ··· 37 다음
