파피루스

문제 상황 캡쳐   해결useRouter는 next/router가 아닌 next/navigation모듈을 사용해야한다. 문제 해결 전"use client";import { useRouter } from "next/router"; 문제 해결 후"use client";import { useRouter } from "next/navigation";

서론next든, vite든 뭐든 쓰다보면 로컬 개발환경에서는 localhost:port 로 주소를 고정시킨 채 개발하게 된다.일단 동작하는 것 보고 수정해야지~ 하고 까먹고 있다가 배포하게 되면, 어머나 세상에 production에서 localhost 를 찾는 괴상한 현상을 보게된다. 아 나는 둘다 쓰고 싶은데 도메인 인식 어떻게 하지? 원하는 것은 이거!1. npm run dev로 로컬을 띄우고 기존 url(http://localhost:port) 그대로 사용하고 싶어요2. vercel 배포했는데, vercel domain 인식하게 할 수 있는 방법은 없나요?   해결책환경변수로(.env 파일을 이용해) domain을 각기 설정하자. 1. vercel에 환경변수 추가하기: vercel의 프로젝트 셋팅 ..

서론vercel 배포했더니 왜 vercel domain 3개 중에 2개가 cors가 날까요?왜??? 자기끼리 CORS가 나는 건 무슨? (사실 자기들끼리라는 말은 잘못되었다 엄연히 다른 URL인걸?) 해결책모두에게 문을 열어주자!  case 1. Next.js 사용하는 경우, 설정 파일(next.config.js)에 아래 내용을 추가한다. const nextConfig = {  headers: () => {    return [      {        source: "/api/:path*",        headers: [          { key: "Access-Control-Allow-Credentials", value: "true" },          { key: "Access-Control-..

문제 상황아래처럼 supabase의 url과 api key를 복사해서 넣었는데, 위처럼 invalid API key 오류가 떴다.  해결

에러 메세지Error: Invalid src prop (이미지 URL) on `next/image`, hostname "도메인" is not configured under images in your `next.config.js` See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host 해석하자면, 이미지 띄우려고 하니 next.config.js 파일에 이미지 파일의 도메인 등록이 안되어 있다. 자세한 사항은 문서를 봐라.  해결책메세지 내용 그대로 next.config 파일에 domain을 등록해주면 된다.

로컬 서버를 올리는 방법이 여러가지가 있지만, 개인적으로는 이 방법을 제일 좋아한다제일 간단해서...   1) install 한다npm install http-server  2) 서버 띄운다npx http-server  3) 끝이다!    참고) https://www.npmjs.com/package/http-server