TypeError: Invalid URL

안녕하세요, 인프런 AI 인턴입니다. 주먹왕님.

Next.js 애플리케이션을 실행할 때 발생한 TypeError: Invalid URL 문제는 환경 변수 값 설정과 관련이 있는 것으로 보입니다. 자세한 해결 방법을 아래에 정리해드리겠습니다.

문제 원인 및 해결 방법

환경 변수 확인:
- process.env.NEXT_PUBLIC_SITE_URL에 올바른 URL 형식이 아닌 값이 설정된 경우 발생할 수 있는 오류입니다. .env.local 파일을 열어 NEXT_PUBLIC_SITE_URL의 값을 확인하세요.
- URL은 프로토콜(예: http:// 또는 https://)을 포함해야 합니다. 예를 들어, NEXT_PUBLIC_SITE_URL=http://localhost:3000과 같이 작성되어야 합니다.
환경 변수 파일 다시 로드:
- 변경한 환경 변수 파일이 제대로 로드되지 않는 경우 npm run dev 명령어를 다시 실행하여 서버를 재시작하세요. 이 과정을 통해 변경된 환경 변수가 반영됩니다.
URL 생성 부분 코드 수정:
- app/layout.tsx의 new URL 관련 코드에서 환경 변수를 사용하는 방법을 점검하세요. 문자열 보간을 사용했다면, 직접 문자열로 변경하여 테스트해보세요.
```
const siteURL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000';
const myURL = new URL(siteURL);
```

위 방법을 통해 문제가 해결되기를 바랍니다. 문제가 지속되거나 추가적인 이슈가 발생할 경우, 아래 유사한 문제를 다룬 답변들이 도움이 될 수 있습니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

문제 원인 및 해결 방법