NextJS/Django Проблема 404 страницы и не обработанная ошибка времени выполнения

Я создаю блог, используя django в качестве бэкенда, nextjs в качестве фронтэнда.

У меня проблема с категориями в navbar, поскольку все они возвращают ошибку 404 (непосредственно перед 404, я получаю Unhandled runtime error менее чем на секунду, я прикрепил скриншот

).

)

В общем, вот мой компонент Navbar.js, где я использую категории

import Link from 'next/link'

  const Navbar = () => {
    return (
        <nav className='navbar navbar-expand-lg navbar-light bg-light'>
            <div className='p-2 text-muted'><Link className='navbar-brand' href={'/'}>5minRead</Link></div>
            <button className='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarNavAltMarkup'
            aria-controls='navbarNavAltMarkup' aria-expanded='false' aria-label='Toggle navigation'>
                <span className='navbar-toggler-icon'></span>
            </button>
            <div className='collapse navbar-collapse' id='navbarNavAltMarkup'>
                <div className='navbar-nav'>
                    <div className='p-4 text-muted'><a href={'/category/world'}>WORLD</a></div>
                    <div className='p-4 text-muted'><Link href={'/category/enviroment'}>ENVIROMENT</Link></div>
                    <div className='p-4 text-muted'><Link href={'/category/technology'}>TECHNOLOGY</Link></div>
                    <div className='p-4 text-muted'><Link href={'/category/culture'}>CULTURE</Link></div>
                    <div className='p-4 text-muted'><Link href={'/category/business'}>BUSINESS</Link></div>
                    <div className='p-4 text-muted'><Link href={'/category/health'}>HEALTH</Link></div>
                    <div className='p-4 text-muted'><Link href={'/category/travel'}>TRAVEL</Link></div>
                    <div className='p-4 text-muted'><Link href={'/category/fashion'}>FASHION</Link></div>
                    <div className='p-4 text-muted'><Link href={'/category/opinion'}>OPINION</Link></div>
                    <div className='p-4 text-muted'><Link href={'/subscribe'}>SUBSCRIBE</Link></div>
                </div>
            </div>
        </nav>
    )
    }

    export default Navbar

вот мой компонент Category.js (любой клик по категории из Navbar должен переходить сюда)

const Category = () => {
return (
    <div>
        category
    </div>
   )
}

export default Category

вот мой views.py, который содержит APIView

class BlogPostCategoryView(APIView):
    serializer_class = BlogPostSerializer
    permission_classes = (permissions.AllowAny, )

def post(self, request, format=None):
    data = self.request.data
    category = data['category']
    queryset = BlogPost.objects.order_by('-date_created').filter(category__iexact=category)

    serializer = BlogPostSerializer(queryset, many=True)

    return Response(serializer.data)

и вот url.py

urlpatterns = [
  path('', BlogPostListView.as_view()),
  path('featured', BlogPostFeaturedView.as_view()),
  path('category', BlogPostCategoryView.as_view()),
  path('<slug>', BlogPostDetailView.as_view()),
]

и, наконец, вот models.py

class Categories(models.TextChoices):
    WORLD = 'world'
    ENVIROMENT = 'enviroment'
    TECHNOLOGY = 'technology'
    CULTURE = 'culture'
    BUSINESS = 'business'
    HEALTH = 'health'
    TRAVEL = 'travel'
    FASHION = 'fashion'
    OPINION = 'opinion'

Я новичок в NextJS, раньше работал только с django. Мне кажется, что я где-то напутал с маршрутизацией. Любая помощь будет принята с благодарностью и заранее спасибо.

Вернуться на верх