0

I'm making a static website with NextJS and Amplify. (+ react, typescript etc)

When I'm using dynamic routing like /projects/[id], It works well on my local but gets some problems after the deployment (after I upload the build files to S3 for static hosting)
Because the NextJS make http fetch request on the web by the route.

For example, when someone access to example.com/projects/1234, it call a GET request to example.com/projects/1234 automatically. And because there are no APIs like that, it returns 404 and do not show the detail page.

In the NextJS document, it says

FAQ > Why does Next.js have its own Router?
... It supports shallow routing which allows you to change the URL without running data fetching methods

But I don't want to fetch the data by URLs...
Q. How can I restrict this feature?

FYI) I tried 'trailingSlash: true` in the nextConfig with some search results on web, but no luck.
Below is my next.config.js

/** @type {import('next').NextConfig} */

const nextConfig = {
    reactStrictMode: true,
    images: {
        domains: [
            "some-name.s3.some-region.amazonaws.com",
        ],
    },
    trailingSlash: true,
}

module.exports = nextConfig

Thanks in advance.

p.s. nextJS version is 12.1.0

Noah Gray
  • 151
  • 1
  • 1
  • 13

1 Answers1

0

It's my fault.

I must use 'Link' of NextJS instead of the 'a' tag.

After compared my another project with this one, I updated some 'a' tag as 'Link' and it started working fine...

Noah Gray
  • 151
  • 1
  • 1
  • 13