Best Practices and Recommendations for Handling Routing in Next.js:

The ideal way to handle this is to rely on Next.js's built-in routing capabilities. Here are a few approaches, depending on your specific goal:

1. Create a pages/donation.js or pages/donation/index.js File:

• Recommended and Most "Next.js Way": If you want the /donation/ route to be handled by a Next.js component, create a file named donation.js inside your pages directory, or an index.js file inside a pages/donation directory.

• Content: The content of this file would be your FinishPage component (or a modified version if needed).

• Benefit: Next.js will automatically create a route at /donation that is handled by this component. You can then leverage all of Next.js's features within this page (data fetching, middleware, etc.).

• Static Export: If you are using static export, Next.js will generate a donation.html file (or donation/index.html) during the build process.

• Example (pages/donation.js):

  // pages/donation.js
  'use client';
  import Footer from '@/components/layout/Footer';
  import Button from '@/components/shared/Button';
  import { prefix } from '@/utils/prefix';
  import Image from 'next/image';
  import { useRouter } from 'next/navigation';
  
  const DonationPage = () => {
    const router = useRouter();
    return (
      <section className="mx-auto finish-wrapper">
        {/* ... your component JSX ... */}
      </section>
    );
  };
  
  export default DonationPage;

2. Ensure Links in Your Application Point to /donation (Without .html):

If you create a pages/donation.js file, make sure all your <Link> components or router.push() calls within your application navigate to /donation (Next.js will handle the underlying file).

3. Consider Rewrites in next.config.js (Less Ideal for Basic Page Routing):

While Next.js has rewrites in next.config.js, these are typically used for more advanced URL manipulation (e.g., making API routes appear under a different path or masking URLs). For basic page routing, creating a file in the pages directory is the standard and recommended approach.

Why Your Static Export Might Have Created donation.html Directly:

If you manually created a donation.html file in your public directory (or somewhere else that gets directly copied during static export), Next.js would serve it directly as a static asset. This bypasses the Next.js page routing system.

Recommended Best Practice:

1. Move your FinishPage component (or its relevant parts) into a pages/donation.js file (or pages/donation/index.js).
2. Update all links within your application to point to /donation.
3. Rebuild your Next.js application (npm run build or yarn build).
4. Rebuild your Docker image and redeploy.

Your Nginx location / block with try_files $uri $uri/ /index.html; should now be sufficient to serve the /donation route correctly (as donation.html or donation/index.html will be generated in the build output).

You can then remove the specific location /donation/ block from your Nginx configuration.

By following this approach, you are letting Next.js handle the routing for your donation page, making your application more standard, maintainable, and less dependent on web server-specific configurations for basic page serving.