DetailView from Django in NextJS 13 (fetching data)

I've got Django based app as my back-end, and NextJS as front-end. I've got a Post model in my Django App with two views - PostDetailView and PostListView.

from django.shortcuts import get_object_or_404
from django.template import TemplateDoesNotExist
from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework import status
from .models import Post
from .serializers import PostSerializer
from rest_framework.renderers import JSONRenderer
from django.http import Http404, HttpResponse

class JSONResponse(HttpResponse):
def __init__(self, data, **kwargs):
    content = JSONRenderer().render(data)
    kwargs['content_type'] = 'application/json'
    super(JSONResponse, self).__init__(content, **kwargs)

class PostListView(APIView):
def get(self, request):
    posts = Post.objects.all()
    serializer = PostSerializer(posts, many=True)
    return JSONResponse(serializer.data)

class PostDetailView(APIView):
def get(self, request, pk):
    try:
        post = Post.objects.get(pk=pk)
        serializer = PostSerializer(post)
        return Response(serializer.data, status=status.HTTP_200_OK)
    except Post.DoesNotExist:
        raise Http404

I've also set up serializers.py and urls.py.

#serializers.py

from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
class Meta:
    model = Post
    fields = '__all__'

#urls.py
from django.contrib import admin
from django.urls import include, path

from . import views

urlpatterns = [
path('api/posts/', views.PostListView.as_view(), name='post-list'),
path('api/posts/<int:pk>/', views.PostDetailView.as_view(), name='post-detail'),
]

In my NextJS App I'm using new approach for folder structure with src/app. This is my folder structure.

- src/app
-- blog
--- page.tsx (here is my 'ListView')
-- [id]
--- page.tsx (here is my 'DetailView')

My ListView works fine, it displays all my objects.

interface Post {
 id: number;
 title: string;
 image_url: string | null;
 content: string;
}

const PostsList: React.FC = () => {
const [posts, setPosts] = useState<Post[]>([]);

useEffect(() => {
 fetchData();
}, []);

 const fetchData = async () => {
    try {
     const response: AxiosResponse<Post[]> = await axios.get('http://127.0.0.1:8000/blog/api/posts/');
     const data: Post[] = response.data;
     setPosts(data);
   } catch (error) {
     console.error('Error fetching data:', error);
   }
 };

 return (

But I've got a problem with my DetailView. I don't know how display this. Have you got any solutions for this?

On local host my link look like this:

#Django (rest API)
List View: http://127.0.0.1:8000/blog/api/posts/
Detail View: http://127.0.0.1:8000/blog/api/posts/2/ (where 2 is ID for my post)

#NextJS
List View: http://127.0.0.1:3000/blog
Detail View: http://127.0.0.1:3000/blog/2 (where 2 is ID form my post

I've tried with something like this, unfortunetly it displays only 'Loading...' which is my info for bad fetching.

import React, { useEffect, useState } from 'react';
import axios, { AxiosResponse } from 'axios';
import { usePathname, useRouter, useSearchParams } from 'next/navigation';

interface Post {
  id: number;
  title: string;
  image_url: string | null;
  content: string;
}

const PostDetail: React.FC = () => {
  const [post, setPost] = useState<Post | null>(null);

  const searchParams = useSearchParams()
  const id = searchParams.get('')

  const fetchData = async () => {
    try {
      const response: AxiosResponse<Post> = await axios.get(`http://127.0.0.1:8000/blog/api/posts/${id}/`);
      const data: Post = response.data;
      setPost(data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  fetchData();

  if (!post) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1 className='font-6xl font-red-800'>{post.title}</h1>
        </div>
  );
};

export default PostDetail;

You are getting the post ID from the URL in Next.js. Since you are using the file structure [id]/page.tsx, Next.js will automatically populate the id value in the query parameter. You can get the id from the query parameter with useRouter hook from next/router:

import React, { useEffect, useState } from 'react';
import axios, { AxiosResponse } from 'axios';
import { useRouter } from 'next/router';

interface Post {
  id: number;
  title: string;
  image_url: string | null;
  content: string;
}

const PostDetail: React.FC = () => {
  const [post, setPost] = useState<Post | null>(null);
  const router = useRouter();
  const { id } = router.query;

  useEffect(() => {
    if (id) {
      fetchData();
    }
  }, [id]);

  const fetchData = async () => {
    try {
      const response: AxiosResponse<Post> = await axios.get(`http://127.0.0.1:8000/blog/api/posts/${id}/`);
      const data: Post = response.data;
      setPost(data);
    } catch (error) {

    }
  };

  if (!post) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1 className='font-6xl font-red-800'>{post.title}</h1>      
    </div>
  );
};

export default PostDetail;

I've found solutions for this one.

const [post, setPost] = useState<Post | null>(null);
const pathname = usePathname();
const id = pathname.split('/').pop();

useEffect(() => {
if (id) {
  fetchData();
}
}, [id]);

const fetchData = async () => {
try {
  const response: AxiosResponse<Post> = await axios.get(`http://127.0.0.1:8000/blog/api/posts/${id}/`);
  const data: Post = response.data;
  setPost(data);
} catch (error) {}
};