I am using nextjs for my fontend.

When I am adding media url in my root url my api not working and throwing error FetchError: invalid json response body at http://127.0.0.1:8000/blog-api reason: Unexpected token < in JSON at position 0 but when I remove it's working.

here is my code:

urls.py

urlpatterns = [
    path('', include('api.urls')),

] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) #when I remove this line my api working on nextjs fontend  

Serializer.py

class BlogSerializer(serializers.ModelSerializer):
    class Meta:
        model = Blog
        fields = '__all__'

views.py

class BlogViewSet(viewsets.ModelViewSet):
    queryset = Blog.objects.all()
    serializer_class = BlogSerializer

my nextjs code for calling api:

 const url = "http://127.0.0.1:8000/blog-api";
  const headers = {
    method: "GET",
    "Content-Type": "application/json",
    Accept: "application/json",
    "User-Agent": "*",
    Authorization: "Token 8736be9dba6ccb11208a536f3531bccc686cf88d",
  };
  const res = await fetch(url, { headers: headers });

  const data = await res.json();

  console.log(data);