[노트장] 적으며 정리해 보는 이론/Next Js6 [Next.js] You are attempting to export "metadata" from a component marked with "use client".... page 라우터를 app라우터로 변경하는 과정에서, creatContext를 사용하여 만든 Provider component를 사용하려면 csr방식으로 변경을 해야했습니다..그래서 "use client"를 작성하여 변경했더니.. metadata를 export 를 할수 없다고 에러가 났었습니다.ㅠㅠ [에러] [원인]AuthProvide의 파일 안에 hook(useState, useEffect등등)을 사용해야하기에.. csr방식으로 변경해야했다,많은 타사에서 "use client"라는 지시어를 포함하지 않고 있기 때문에, 서버 컴포넌트에서는 사용하기가 어럽다고 한다. 해결하려면 자체 클라이언트 구성 요소에서 클라이언트 전용 기능을 사용하는 타사 구성 요소를 래핑하면 됩니다.이렇게 공식문서에 설명이.. 2024. 5. 25. [Next.js] Error: Unexpected token 'I', "Internal S"... is not valid JSON 처음 보는 에러인데 수업 보고, 따라하고 하고있는데 에러가 났다. [문제]// app/movie/[id]/page.tsximport { Suspense } from 'react';import MovieInfo from '../../../components/movie_info';import MovieVideo from '../../../components/movie_video';export default async function MovieDetail({ params: { id } }: { params: { id: string } }) { return ( movie info );}// component/movie/MovieInfo.tsximp.. 2024. 5. 25. [Next.js][redirect 에러] 리디렉션한 횟수가 너무 많습니다. [문제]로그인을 유무에 따라 로그인, 회원가입 페이지의 제한을 두기위해 redirect 작업을 하고 있는데, 리디렉션한 횟수가 너무 많다고 에러가 떴다 ㅠㅠ [에러가 난 이유]찾아보니 에러나 난 이유는 무한루프에 빠져서 생긴 에러라고 한다 ㅠㅠconsole.log로 보니.. 많이 나온다.. [에러의 원인]http://localhost:3000/signin 쿠기가 없어서 로그인 페이지로 이동했는데, 로그인 상태를 확인하는 과정에서 이미 /signin에 있지만 또 /signin로 보내고 를 반복하다 보니.. 에러가 났다. export async function getServerSideProps(context: GetServerSidePropsContext) { const { req } = con.. 2024. 5. 18. [Next.js] Environment Variables next.js 공식문서를 읽고 정리해 놓은 문서입니다.[참고] https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables#loading-environment-variables ◼ 횐경변수 서버 환경 변수 사용 Next.js에서 서버 측에서 환경 변수를 사용할 때는 process.env를 사용하면 됩니다. NEXT_PUBLIC_ 접두사를 사용할 필요가 없습니다.// pages/api/hello.jsexport default function handler(req, res) { res.status(200).json({ message: process.env.SOME_SERVER_ENV_VAR });}서버 측.. 2024. 5. 15. [랜더링] CSR & SSR & SSG 페이지의 랜더링 방식 CSR , SSR, SSG에 대해 정리해보려고 합니다 ◼ CSR Client-side Rendering의 약자입니다. 단어를 보면 Client단어가 눈에 띄는데요.단어에 명시되어 있는 것처럼 서버가 아닌 클라이언트에서 랜더링 하는 방식을 이야기합니다.그렇다고 모든 것을 클라이언트 측에서 해주는 것은 아닙니다.다만 서버 보다 더 많은 비중으로 클라이언트에서 랜더링 작업을 해주는 것이죠. 이미지에서 좀 더 설명을 붙이자면, 그러나 한 번 웹 페이지에 접속하여 데이터를 받아오면, 해당 데이터는 브라우저의 캐시에 저장됩니다. 따라서 사용자가 이미 방문했던 페이지에 다시 접속할 때는 새로운 데이터를 다운로드할 필요 없이, 캐시에 저장된 데이터를 바로 불러와서 표시할 수 있습니다. 이는 페.. 2024. 5. 9. [Next.js] Next.js란 fullstack web applications을 개발하기 위한 React 프레임위크 입니다.즉 FE(프론트엔드) + BE(백엔드) 개발을 Next에서 한번에 작업이 가능하다고 합니다.react의 기능을 가지고 있으며, 몇가지 기능이 추가된 프레임워크기에react의 확장판으로 생각하면 좋을꺼 같습니다. nextjs 공식문서에서 주요 특징을 6가지를 적어 놓았는데요.그 중에서 제일 큰 강점으로 꼽히는 것은,Routing, Randering, Optimizations를 강점으로 이야기를 하고 있습니다. nextjs 13버전으로 업데이트 하면서, 기본적으로 제공해주는 기능들이 너무 좋아 Nextjs의 시대라고 할정도 많은 각광을 받고 있는 워크툴입니다. [참고]https://nextjs.or.. 2024. 5. 8. 이전 1 다음
