title: NextJS/Django 404 page issue & Unhandled runtime error
body: <p>So I am creating a blog using django as a backend, nextjs as a fronted.</p>
  <p>I am having an issue with categories in navbar, as all of them are returning 404 error (just before 404, I get Unhandled runtime error for less than a second, I attached a screenshot</p>
  <p><a href="https://i.stack.imgur.com/CF5lp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CF5lp.jpg" alt="error" /></a>)</p>
  <p>Anyway, here is my Navbar.js component, where I use categories</p>
  <pre><code>import Link from 'next/link'
  
    const Navbar = () =&gt; {
      return (
          &lt;nav className='navbar navbar-expand-lg navbar-light bg-light'&gt;
              &lt;div className='p-2 text-muted'&gt;&lt;Link className='navbar-brand' href={'/'}&gt;5minRead&lt;/Link&gt;&lt;/div&gt;
              &lt;button className='navbar-toggler' type='button' data-toggle='collapse' data-target='#navbarNavAltMarkup'
              aria-controls='navbarNavAltMarkup' aria-expanded='false' aria-label='Toggle navigation'&gt;
                  &lt;span className='navbar-toggler-icon'&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;div className='collapse navbar-collapse' id='navbarNavAltMarkup'&gt;
                  &lt;div className='navbar-nav'&gt;
                      &lt;div className='p-4 text-muted'&gt;&lt;a href={'/category/world'}&gt;WORLD&lt;/a&gt;&lt;/div&gt;
                      &lt;div className='p-4 text-muted'&gt;&lt;Link href={'/category/enviroment'}&gt;ENVIROMENT&lt;/Link&gt;&lt;/div&gt;
                      &lt;div className='p-4 text-muted'&gt;&lt;Link href={'/category/technology'}&gt;TECHNOLOGY&lt;/Link&gt;&lt;/div&gt;
                      &lt;div className='p-4 text-muted'&gt;&lt;Link href={'/category/culture'}&gt;CULTURE&lt;/Link&gt;&lt;/div&gt;
                      &lt;div className='p-4 text-muted'&gt;&lt;Link href={'/category/business'}&gt;BUSINESS&lt;/Link&gt;&lt;/div&gt;
                      &lt;div className='p-4 text-muted'&gt;&lt;Link href={'/category/health'}&gt;HEALTH&lt;/Link&gt;&lt;/div&gt;
                      &lt;div className='p-4 text-muted'&gt;&lt;Link href={'/category/travel'}&gt;TRAVEL&lt;/Link&gt;&lt;/div&gt;
                      &lt;div className='p-4 text-muted'&gt;&lt;Link href={'/category/fashion'}&gt;FASHION&lt;/Link&gt;&lt;/div&gt;
                      &lt;div className='p-4 text-muted'&gt;&lt;Link href={'/category/opinion'}&gt;OPINION&lt;/Link&gt;&lt;/div&gt;
                      &lt;div className='p-4 text-muted'&gt;&lt;Link href={'/subscribe'}&gt;SUBSCRIBE&lt;/Link&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      )
      }
  
      export default Navbar
  </code></pre>
  <p>here is my Category.js component (any category click from Navbar should navigate here)</p>
  <pre><code>const Category = () =&gt; {
  return (
      &lt;div&gt;
          category
      &lt;/div&gt;
     )
  }
  
  export default Category
  </code></pre>
  <p>here is my views.py that contain APIView</p>
  <pre><code>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)
  </code></pre>
  <p>and here is url.py</p>
  <pre><code>urlpatterns = [
    path('', BlogPostListView.as_view()),
    path('featured', BlogPostFeaturedView.as_view()),
    path('category', BlogPostCategoryView.as_view()),
    path('&lt;slug&gt;', BlogPostDetailView.as_view()),
  ]
  </code></pre>
  <p>and lastly here is models.py</p>
  <pre><code>class Categories(models.TextChoices):
      WORLD = 'world'
      ENVIROMENT = 'enviroment'
      TECHNOLOGY = 'technology'
      CULTURE = 'culture'
      BUSINESS = 'business'
      HEALTH = 'health'
      TRAVEL = 'travel'
      FASHION = 'fashion'
      OPINION = 'opinion'
  </code></pre>
  <p>I am new to NextJS, I used to work with django alone.  I think I am messing up the routing somewhere. Any help is appreciated and thank you in advance.</p>