diff --git a/traque-front/app/layout.js b/traque-front/app/layout.js
index 4434414..209bd7e 100644
--- a/traque-front/app/layout.js
+++ b/traque-front/app/layout.js
@@ -2,6 +2,8 @@ import { Inter } from "next/font/google";
import "./globals.css";
import SocketProvider from "@/context/socketContext";
+import { PublicEnvScript } from 'next-runtime-env';
+
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
@@ -11,6 +13,9 @@ export const metadata = {
export default function RootLayout({ children }) {
return (
+
+
+
{children}
diff --git a/traque-front/components/admin/teamEdit.jsx b/traque-front/components/admin/teamEdit.jsx
index 913a9df..02e614c 100644
--- a/traque-front/components/admin/teamEdit.jsx
+++ b/traque-front/components/admin/teamEdit.jsx
@@ -4,6 +4,8 @@ import BlueButton, { RedButton } from '../util/button';
import useAdmin from '@/hook/useAdmin';
import dynamic from 'next/dynamic';
+import { env } from 'next-runtime-env';
+
const CircularAreaPicker = dynamic(() => import('./mapPicker').then((mod) => mod.CircularAreaPicker), {
ssr: false
});
@@ -13,11 +15,12 @@ export default function TeamEdit({ selectedTeamId, setSelectedTeamId }) {
const [newTeamName, setNewTeamName] = React.useState('');
const { updateTeam, getTeamName, removeTeam, getTeam, teams } = useAdmin();
const [team, setTeam] = useState({});
+ const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
var protocol = "https://";
- if (process.env.NEXT_PUBLIC_SOCKET_HOST == "localhost") {
+ if (NEXT_PUBLIC_SOCKET_HOST == "localhost") {
protocol = "http://";
}
- const SERVER_URL = protocol + process.env.NEXT_PUBLIC_SOCKET_HOST + "/back";
+ const SERVER_URL = protocol + NEXT_PUBLIC_SOCKET_HOST + "/back";
console.log(SERVER_URL);
useEffect(() => {
diff --git a/traque-front/components/team/enemyTeamModal.jsx b/traque-front/components/team/enemyTeamModal.jsx
index 6064552..fa8e964 100644
--- a/traque-front/components/team/enemyTeamModal.jsx
+++ b/traque-front/components/team/enemyTeamModal.jsx
@@ -3,6 +3,8 @@ import { RedButton } from "../util/button";
import { useEffect, useRef } from "react";
import Image from "next/image";
+import { env } from 'next-runtime-env';
+
export function EnemyTeamModal({ visible, onClose }) {
const { teamId, enemyName } = useGame();
const imageRef = useRef(null);
@@ -18,10 +20,11 @@ export function EnemyTeamModal({ visible, onClose }) {
}
var protocol = "https://";
- if (process.env.NEXT_PUBLIC_SOCKET_HOST == "localhost") {
+ const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
+ if (NEXT_PUBLIC_SOCKET_HOST == "localhost") {
protocol = "http://";
}
- const SERVER_URL = protocol + process.env.NEXT_PUBLIC_SOCKET_HOST + "/back";
+ const SERVER_URL = protocol + NEXT_PUBLIC_SOCKET_HOST + "/back";
console.log(SERVER_URL);
return (visible &&
<>
diff --git a/traque-front/components/team/waitingScreen.jsx b/traque-front/components/team/waitingScreen.jsx
index 5958bdf..837fa6b 100644
--- a/traque-front/components/team/waitingScreen.jsx
+++ b/traque-front/components/team/waitingScreen.jsx
@@ -4,15 +4,18 @@ import { useRef } from "react";
import Image from "next/image";
import { useTeamContext } from "@/context/teamContext";
+import { env } from 'next-runtime-env';
+
export function WaitingScreen() {
const { name, teamId } = useGame();
const { gameSettings } = useTeamContext();
const imageRef = useRef(null);
+ const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
var protocol = "https://";
- if (process.env.NEXT_PUBLIC_SOCKET_HOST == "localhost") {
+ if (NEXT_PUBLIC_SOCKET_HOST == "localhost") {
protocol = "http://";
}
- const SERVER_URL = protocol + process.env.NEXT_PUBLIC_SOCKET_HOST + "/back";
+ const SERVER_URL = protocol + NEXT_PUBLIC_SOCKET_HOST + "/back";
console.log(SERVER_URL);
function sendImage() {
diff --git a/traque-front/context/socketContext.jsx b/traque-front/context/socketContext.jsx
index 3cad8c7..e972299 100644
--- a/traque-front/context/socketContext.jsx
+++ b/traque-front/context/socketContext.jsx
@@ -1,13 +1,16 @@
"use client";
import { createContext, useContext, useMemo } from "react";
+import { env } from 'next-runtime-env';
+
const { io } = require("socket.io-client");
var proto = "wss://";
-if (process.env.NEXT_PUBLIC_SOCKET_HOST == "localhost") {
+const NEXT_PUBLIC_SOCKET_HOST = env("NEXT_PUBLIC_SOCKET_HOST");
+if (NEXT_PUBLIC_SOCKET_HOST == "localhost") {
proto = "ws://";
}
-const SOCKET_URL = proto + process.env.NEXT_PUBLIC_SOCKET_HOST;
+const SOCKET_URL = proto + NEXT_PUBLIC_SOCKET_HOST;
const USER_SOCKET_URL = SOCKET_URL + "/player";
const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";
diff --git a/traque-front/package.json b/traque-front/package.json
index 0a03d1d..819d808 100644
--- a/traque-front/package.json
+++ b/traque-front/package.json
@@ -13,6 +13,7 @@
"@hello-pangea/dnd": "^16.6.0",
"leaflet-defaulticon-compatibility": "^0.1.2",
"next": "^14.2.9",
+ "next-runtime-env": "^3.2.2",
"react": "^18",
"react-dom": "^18",
"react-leaflet": "^4.2.1",