next.js16 [TIL] 2023.07.01 Next.js_router.push와 router.replace의 차이점 useRouter import { useRouter } from 'next/navigation'; Next.js 13부터는 `useRouter`를 'next/router'가 아닌 'next/navigation'에서 import 해서 사용해야 한다! 만약 `useRouter`를 'next/router'에서 import하면 이미지와 같은 에러가 발생한다. 잠시 router 관련 Next.js 13에서 달라진 점을 살펴보자. Migrating from the pages directory: The new useRouter hook should be imported from `next/navigation` and not `next/router` The pathname string has been removed a.. 2023. 7. 1. [Next.js] Next.js 13에서 SSG, SSR, ISR 적용하기_fetch() API NEXT.JS 13 버전에서는 `getStaticProps`, `getServerSideProps` 함수를 더 이상 사용하지 않는다는 소식을 보고 그럼 SSR과 SSG는 어떻게 적용할 수 있는 걸까 궁금해서 찾아봤다. 일단 NEXT 13부터 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작하게 되었으며 SSR, SSG, ISR을 적용하기 위해서 `getStaticProps`, `getServerSideProps` 등의 함수가 아닌 `fetch` API를 사용한다. Data Fetching // This request should be cached until manually invalidated. // Similar to `getStaticProps`. // `force-cache` is the defaul.. 2023. 6. 10. [TIL] 2023.05.19 Next.js 13버전에 Recoil 적용하기 Root Layout에 바로 RecoilRoot를 넣으려고 했더니 에러가 발생했다. TypeError: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. RecoilRoot를 사용하려면 서버 컴포넌트를 클라이언트 컴포넌트로 변경해야 하는 거 같다. 하지만 Root Layout 파일을 클라이언트로 변경하면 모든 컴포넌트가 클라이언트 컴포넌트로 변경되는 결과가 생길 거 같아서 recoil 파일을 따로 빼서 적용하기로 했다. 'use client' import { ReactNode } from 'react' import { RecoilRoot } from 're.. 2023. 5. 19. [TIL] 2023.05.07 Next.js next/navigation과 usePathname() route에 따라 코드를 다르게 작성하고 싶어서 useRouter를 이용해서 pathname을 가져오려고 했다. 그런데 서버 컴포넌트를 사용할 때는 next/navigation을 사용하라는 에러 메시지가 떴다. // 수정 전 import { useRouter } from 'next/router'; // 수정 후 import { useRouter } from 'next/navigation'; 그래서 useRouter를 next/navigation에서 import 해 오는 방식으로 수정했는데 또다시 클라이언트 컴포넌트에서만 useRouter를 사용할 수 있다는 에러 메시지가 발생했다. 그래서 최상단에 "use client"를 추가하여 서버 컴포넌트를 클라이언트 컴포넌트로 변경해 주었다. import { us.. 2023. 5. 7. [TIL] 2023.04.29 Next.js 13_Layouts Today I Learned Next.js 13 버전 Layouts 기능 공부하기 Next.js Layouts A layout is UI that is shared between multiple pages. On navigation, layouts preserve state, remain interactive, and do not re-render. Layouts can also be nested. You can define a layout by default exporting a React component from a layout.js file. The component should accept a children prop that will be populated with a child layout .. 2023. 4. 29. [TIL] 내일배움캠프 React 과정 2023.03.03 Today I Learned 로그인 모달, 회원가입 페이지, 마이 페이지 CSS 작업 input 태그 A component is changing a controlled input to be uncontrolled. 에러 Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 이 에러는 .. 2023. 3. 4. [TIL] 내일배움캠프 React 과정 2023.02.25 Today I Learned Next.js 공부하기 회고 튜터님한테 추천받아서 팀원들 모두 구매한 그 도서 ㅋㅋㅋ 오늘은 기능 개발보다는 이 책을 읽으면서 Next.js를 공부하는 시간을 가졌다. 읽으면서 나중에 적용해보고 싶은 부분을 노션에 메모해 놓기도 했다. Next.js를 공부하고 싶은 사람이라면 이 책을 매우 추천함! 2023. 2. 26. [TIL] 내일배움캠프 React 과정 2023.02.22 Today I Learned 마이페이지 프로필 수정 기능 구현 및 전체적인 코드 리팩토링 오전 9시 반 디자이너님과 디자인 회의 저녁 8시에 원장님께 디자인 반영한 버전으로 최종 시연 Next.js에서 로그인 후 이전 페이지로 이동하기 기존에는 로그인을 했을 때 로딩 페이지로 이동 후 최초 로그인 여부에 따라 회원가입 페이지 혹은 메인 페이지로 이동하도록 구현했다. 그런데 헤더에 로그인 버튼을 클릭해서 로그인 모달에서 로그인을 처리하기 때문에 최초 로그인 유저가 아닐 때 무조건 메인으로 이동하는 게 아니라 기존 페이지로 돌아가도록 구현하고 싶었다. const router = useRouter(); router.back(); 그래서 검색을 해봤더니 Next.js에서 친절하게 그런 기능을 제공해주고 있었다!.. 2023. 2. 23. [TIL] 내일배움캠프 React 과정 2023.02.19 Today I Learned 북마크 기능 구현 전체적인 코드 리팩토링 로딩 화면에 스피너 추가하기 (next.js) import spinner from '../../../assets/spinner.gif'; import Image from 'next/image'; const LoadingSpinner = () => { return ( ); }; export default LoadingSpinner; 따로 라이브러리를 설치하지 않고 로딩 중 이미지를 gif로 폴더에 넣어준 후 import 해서 src에 넣어주는 방법으로 구현했다. 참고 https://loading.io/ https://anerim.tistory.com/221 next/Image 사용할 때 외부 링크 다중으로 지정하기 /** @type {i.. 2023. 2. 20. [TIL] 내일배움캠프 React 과정 2023.02.15 Today I Learned NetAuth.js 공부하기 회원가입 기능 구현 NextAuth의 refetchOnWindowFocus 속성 import { SessionProvider } from "next-auth/react" export default function App({ Component, pageProps: { session, ...pageProps }, }) { return ( ) } 페이지에 포커스가 갈 때마다 유저의 session 정보를 계속해서 볼러 오는 것 때문에 문제 되는 상황이 있었는데 공식 문서를 보다가 SessionProvider에 refetchOnWindowFocus라는 속성이 있다는 것을 발견했다! 항상 공식문서를 잘 확인해야겠다는 생각이 또 들었다. 공식문서 https:/.. 2023. 2. 15. 이전 1 2 다음
