localhost:300/api is not working : "This page isn’t working"

When I ran npm run dev in the console, the web site runs but when I tried to run the API, its not working, I have created a portfolio folder: app: [api: route.js] , page.js.

route.js:

import { OpenAIClient, AzureKeyCredential } from '@azure/openai';
import { NextResponse } from 'next/server';

const endpoint = process.env.AZURE_OPENAI_ENDPOINT;
const apiKey = process.env.AZURE_OPENAI_API_KEY;
const model = process.env.AZURE_OPENAI_MODEL;

export async function POST(req){
    

    return NextResponse.json({ 
        message: 'Hello world'
     })
}

.env:

AZURE_OPENAI_ENDPOINT=https://******.openai.azure.com/
AZURE_OPENAI_API_KEY=**************
AZURE_OPENAI_MODEL=deployment

results :
should be the screen which shows :
{
Hello World
}

enter image description here
Here i tried to run the npm run dev , then i typed in the url : localhost:300/api then i faced the issue : "This page isn’t working"

>Solution :

You’ve defined a POST route, but you’re trying to access it with a GET request. Either send a POST request, or change your route to a GET route:

export async function GET(req) {
    return NextResponse.json({ 
        message: 'Hello world'
     });
}