NEXT_PUBLIC_SOCKET_SERVER_URL

소켓 서버 주소만 공개 환경 변수로 브라우저까지 전달합니다

Next.js는 화면과 번들을 맡고, 지속 연결은 별도 Socket.IO 서버가 맡습니다. 코드가 아니라 환경별 주소를 바꿔 같은 채팅 컴포넌트를 유지합니다.

1. 프로젝트 루트

.env.local에 연결 대상 기록

NEXT_PUBLIC_SOCKET_SERVER_URL=
http://localhost:4100

브라우저에 보여도 되는 값만 NEXT_PUBLIC_ 접두사를 붙입니다.

2. Next.js 빌드 경계

공개 변수만 클라이언트 번들로 이동

서버 비밀 값과 분리 접두사가 없는 토큰이나 키는 브라우저 코드에 넣지 않습니다.

이 단계가 서버/클라이언트 환경 변수의 경계입니다.

3. 클라이언트 컴포넌트

ChatPage가 주소를 읽어 연결

const SOCKET_SERVER_URL =
  process.env.NEXT_PUBLIC_SOCKET_SERVER_URL;

io(SOCKET_SERVER_URL);

하드코딩 대신 주입된 주소로 Socket.IO 연결을 엽니다.

4. 별도 실행 프로세스

Socket.IO 서버가 연결을 유지

Next.js 밖의 실시간 서버 server.listen(4100)에서 이벤트 수신과 브로드캐스트를 담당합니다.

Vercel 서버리스 함수에 영구 WebSocket 서버를 직접 올리지 않습니다.