Fix: Issues with Initial Project Run

.env.template

@@ -0,0 +1,6 @@
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="YOUR_PUBLIC_CLERK_KEY"
+CLERK_SECRET_KEY="YOUR_SECRET_CLERK_KEY"
+
+
+NEXT_PUBLIC_STREAM_PUBLIC_KEY="YOUR_PUBLIC_STREAM_CHAT_KEY"
+STREAM_CHAT_SECRET="YOUR_SECRET_STREAM_CHAT_KEY"

app/api/register-user/route.ts

@@ -3,7 +3,7 @@ import { StreamChat } from 'stream-chat';
 
 export async function POST(request: Request) {
   const serverClient = StreamChat.getInstance(
-    '7cu55d72xtjs',
+    process.env.NEXT_PUBLIC_STREAM_PUBLIC_KEY!,
     process.env.STREAM_CHAT_SECRET
   );
   const body = await request.json();

app/api/token/route.ts

@@ -2,7 +2,7 @@ import { StreamChat } from 'stream-chat';
 
 export async function POST(request: Request) {
   const serverClient = StreamChat.getInstance(
-    '7cu55d72xtjs',
+    process.env.NEXT_PUBLIC_STREAM_PUBLIC_KEY!,
     process.env.STREAM_CHAT_SECRET
   );
   const body = await request.json();

app/api/users/route.ts

@@ -3,7 +3,7 @@ import { StreamChat } from 'stream-chat';
 
 export async function GET() {
   const serverClient = StreamChat.getInstance(
-    '7cu55d72xtjs',
+    process.env.NEXT_PUBLIC_STREAM_PUBLIC_KEY!,
     process.env.STREAM_CHAT_SECRET
   );
   const response = await serverClient.queryUsers({});

app/page.tsx

@@ -10,7 +10,7 @@ import MyChat from '@/components/MyChat';
 // const userId = '7cd445eb-9af2-4505-80a9-aa8543c3343f';
 // const userName = 'Harry Potter';
 
-const apiKey = '7cu55d72xtjs';
+const apiKey = process.env.NEXT_PUBLIC_STREAM_PUBLIC_KEY!
 // const userToken =
 //   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiN2NkNDQ1ZWItOWFmMi00NTA1LTgwYTktYWE4NTQzYzMzNDNmIn0.TtrCA5VoRB2KofI3O6lYjYZd2pHdQT408u7ryeWO4Qg';
 

next.config.js

@@ -30,6 +30,10 @@ const nextConfig = {
         protocol: 'https',
         hostname: 'starwars.fandom.com',
       },
+      {
+        protocol: 'https',
+        hostname: 'lh3.googleusercontent.com',
+      },
     ],
   },
 };