soyoung210 / immutable.wedding Goto Github PK

안녕하세요 개발자님! 6월에 결혼식을 앞두고 있는 한일 국제커플입니다 :)
인스타그램 형태의 모바일청첩장을 찾다가 소영님께서 만드신 개발후기 글을 읽고 이곳까지 오게되었습니다..ㅎㅎ
웹코딩은 전혀 문외한이었던 저도 적어주신 템플릿 사용 메뉴얼과 구글링을 통해 혼자서 deploy까지 완료하게 되었습니다..ㅎㅎㅎ
지나고보면 간단한 과정이었는데 기초가 없는 상태에서 많이 해매면서 시행착오가 있었네요.
마지막까지 문제없이 성공했으면 정말 좋았을텐데..ㅜㅜ
한가지 에러가 있어서 도움을 요청드리고자 이렇게 문의를 남깁니다.

2가지 조건에서 해당 템플릿을 이용하여 컴파일했을때 웹에서 같은 현상이 발생했습니다.

1. Windows 10 명령 프롬프트 환경(Next.js - node :16.14.2 version)

앞서 supabase 프로젝트의 환경변수(.env.local) -> main폴더에 생성,
public/assets/data/*.json 수정, public/img 수정
npm run dev 후 컴파일 이상없이 진행 되며
localhost 로 접속하면 처음 잠깐동안 청첩장 화면이 정상적으로 나왔다가 바로 에러 문구가 발생합니다.
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'length')
경로는
.next\static\chunks\pages\index.js
.next\static\chunks\main.js
안에서 발생하는 문제인데 구글링 통해 해당 *.js파일을 수정해보았지만 마찬가지였습니다.
결국 수정하더라도 컴파일을 새로하면 .next 폴더 내 파일은 초기화되어 소용없음을 알게되었네요..ㅜㅜ
두번째 시도로 에러를 무시하고 vercel을 통해 배포를 바로 시도해 보기로 했습니다.

2. Vercel
   Vercel 계정 생성 및 github 프로젝트 연결 + Environment Variables 값(supabase anon, URL) 추가
   배포 후 생성된 웹페이지를 들어가면 마찬가지로 처음 잠깐동안 청첩장 화면이 나왔다가 바로 에러 문구가 나옵니다.
   (Application error: a client-side exception has occurred ([developer guidance])
   웹 개발자 콘솔을 열어 확인해보면 마찬가지로
3. TypeError: Cannot read properties of null (reading 'length') - 에러 6건
4. https://ietepoahbepwjtrkbbml.supabase.co/rest/v1/comments?select=id%2CfeedId%2Cmessage%2CcreateAt&feedId=eq.999&order=id.desc.nullslast -3건이 발생되며
   해당 링크에 들어가면 → Kong error No API key found in request. 가 출력됩니다.

혹시 제가 환경변수 입력하는 부분 Supabase API 값을 잘못주었거나 Supabase 프로젝트 설정이 잘못되어서
그런 에러가 발생하는 건지..아니면 혹시 다른 놓친부분이 있는지 피드백주시면 정말로 감사하겠습니다! ㅜㅜ

• 이미지 컴포넌트 blurDataURL채우기 (불러올때 플레이스홀더?)
• Text컴포넌트 제작 (레퍼런스)
• Flex컴포넌트를 Text컴포넌트처럼 바꾸기
• ComponentPassThrough any type해결
• next 11