Next.js
-
Recoil, react-query 로그인 오류Next.js 2022. 12. 24. 22:02
로그인 기능을 구현 하고 있는데, 오류가 난다. Violation: Duplicate atom key "loginState". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement 서칭 해보니 나오는 스택오버플로우 https://stackoverflow.com/questions/71291122/how-can-i-write-update-localstorage-object-in-recoil-atom How can i write(=update) Localstorage object in Recoil Atom? I try to get LocalSt..
-
[Nextjs]SSG,SSR react-query로 Dynamic Routes에 적용Next.js 2022. 12. 22. 16:07
_app.tsx import '../styles/globals.css'; import React from 'react'; import type { AppProps } from 'next/app'; import { Hydrate, QueryClient, QueryClientProvider } from 'react-query'; import { RecoilRoot } from 'recoil'; function MyApp({ Component, pageProps }: AppProps) { const queryClient = React.useRef(new QueryClient()); //const [queryClient] = React.useState(() => new QueryClient()) return (..
-
[Nextjs]상태관리Next.js 2022. 12. 22. 13:06
Nextjs를 공부할겸 프로젝트를 하나 만들고 있는데, seo가 필요해서 ssr를 사용 해야했다. 근데 Nextjs에는 Hydrate라는 개념이 존재함. 따라서 비동기 서버 상태 관리는 react-query를 사용하고, 클라이언트 상태관리는 Recoil을 사용함. 서버 상태관리 : react-query 클라이언트 상태관리 : recoil npm i react-query npm install recoil 2가지를 적용하기 위해서 _app.tsx 파일에서 설정 해줘야함. import '../styles/globals.css'; import React from 'react'; import type { AppProps } from 'next/app'; import { Hydrate, QueryClient, Qu..
-
[Nextjs 스와이프] Swiper 사용Next.js 2022. 7. 23. 23:45
https://swiperjs.com/get-started Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com npm install swiper Next.js를 사용 하기 때문에 Swiper react 공식문서 참고 https://swiperjs.com/react Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and ama..
-
[Nextjs 시작]Next.js 2022. 7. 19. 17:24
https://nextjs.org/docs/getting-started Getting Started | Next.js Get started with Next.js in the official documentation, and learn more about all our features! nextjs.org 공식문서 기준으로 npx create-next-app@latest --typescript typescript 옵션값으로 바로 설치 가능. npm run dev또는 yarn dev를 실행 pnpm dev하여 개발 서버를 시작합니다.http://localhost:3000 https://tailwindcss.com/docs/guides/nextjs Install Tailwind CSS with Next.js..