diff --git a/README.md b/README.md
index b8a5c442170fc2f9abe3890ecd0e17860530bbe9..b65c825601e78074bf10cc859a3f6922dfba2c47 100644
--- a/README.md
+++ b/README.md
@@ -1,30 +1,26 @@
 ## Configuration
 
-This sucks, but we'll come up with something better later.
+1. Create a `.env.local` file in the root directory of the project:
+```bash
+# API host for internal requests.
+#
+# For example, if the API is running on localhost:8080,
+# set INTERNAL_API_HOST=localhost:8080.
+#
+# If the API is running as a docker compose service called "api",
+# set INTERNAL_API_HOST=api:8080.
+INTERNAL_API_HOST=
 
-1. Set the API host in `next.config.mjs`:
-```js
-/* next.config.mjs */
-const nextConfig = {
-  // ...
-  async rewrites() {
-    return [
-      {
-        source: "/api/:path*",
-        destination: "http{s}://{api_host}/:path*",
-      },
-    ];
-  },
-};
+# API host for public requests.
+#
+# This is the host that the client will use to make requests to the API.
+# It is needed because the client connects to the API from the browser
+# for websocket connections.
+#
+# For example, if the API is running on saci.inf.ufpr.br:8080,
+# set NEXT_PUBLIC_API_HOST=saci.inf.ufpr.br:8080.
+NEXT_PUBLIC_API_HOST=
 ```
-2. Set the API host in `src/app/analysis/[id]/page.js`:
-```js
-/* src/app/analysis/[id]/page.js */
-const api_host = "{api_host}";
-    // ...
-```
-
-e.g. api_host = "localhost:8080"
 
 ## Development
 
diff --git a/next.config.mjs b/next.config.mjs
index 48f0bf784f9d4b655cd13baa18c3b1d21664b960..be0bab08716a4abdf44ee665cea1f7a170d3d7ca 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -4,7 +4,7 @@ const nextConfig = {
     return [
       {
         source: "/api/:path*",
-        destination: "http://localhost:8080/:path*",
+        destination: `http://${process.env.INTERNAL_API_HOST}/:path*`,
       },
     ];
   },
diff --git a/src/app/analysis/[id]/page.js b/src/app/analysis/[id]/page.js
index e9d0274b8efc779d45cf8735f65aaeb876baaf41..4dc844d58f0d83d275e9be2396681a80394265c7 100644
--- a/src/app/analysis/[id]/page.js
+++ b/src/app/analysis/[id]/page.js
@@ -6,8 +6,6 @@ import { notFound } from "next/navigation";
 import "@/styles/analysis/activity-timeline.css";
 import "@/styles/analysis/page.css";
 
-const api_host = "localhost:8080";
-
 export default function Analysis({ params: { id } }) {
   const [report, setReport] = useState(null);
   const [failed, setFailed] = useState(false);
@@ -21,7 +19,7 @@ export default function Analysis({ params: { id } }) {
   }, [failed]);
 
   useEffect(() => {
-    const ws = new WebSocket(`ws://${api_host}/status/${id}`);
+    const ws = new WebSocket(`ws://${process.env.NEXT_PUBLIC_API_HOST}/status/${id}`);
 
     ws.onmessage = (event) => {
       setReport(JSON.parse(event.data));
@@ -71,7 +69,7 @@ export default function Analysis({ params: { id } }) {
 }
 
 function validateId(id, setFailed) {
-  fetch(`https://${api_host}/analysis/${id}`, { cache: 'no-store' })
+  fetch(`http://${process.env.NEXT_PUBLIC_API_HOST}/analysis/${id}`, { cache: 'no-store' })
     .then((res) => {
       if (!res.ok) {
         throw new Error(`Failed to validate id: got ${res.status} response from api`);