Next js dynamic route in production return 403 error but should return 404. What could be the problem?

user_11486371 0
Viewed 4331

When I try to go to https://site.con/categories/ I receive 403 Forbidden, but when I go to https://site.con/categories/sport everything fine, and else routes work fine. What could be the problem?

pages/categories/[id].js:

import { categories } from '../../data/categories';
import CategoryLayout from '../../layouts/CategoryLayout';

const Page = ({ category }) => {
  return <CategoryLayout data={category} />;
};
export async function getStaticPaths() {
  return {
    paths: Object.keys(categories).map(category => ({
      params: {
        page: category
      }
    })),
    fallback: false
  };
}

export async function getStaticProps({ params }) {
  const category = categories[params.id] || [];
  return {
    props: { category }
  };
}

export default Page;
next.js reactjs production nginx javascript
1 Answers

faced the same problem. Look at your server - you probably don't have index.html inside the /categories folder.

I've found the solution here: How do I omit the html extension in next.js?

adding

module.exports = {
  exportTrailingSlash: true,
}

would create physical folder for every route in /pages with index.html instead of the route.html

Hope it helps you!

user_112594650
Related