Home page redirection problem with a SPA under Next.js and Nginx - Stack Overflow

admin管理员组

文章数量:1023195

I'm experiencing a problem with my website, a Single Page Application (SPA) developed with Next.js and deployed behind Nginx. Here's the problem in detail:

I can navigate between all the pages of the site without any problem via the internal links. But when I reload a specific page or try to access a specific URL directly (e.g. /faq or /metrics), the site automatically redirects to the home page (/home), instead of loading the requested page. This problem does not occur in local environments. It only occurs in remote development or production environments.

Here a snippet of nginx.conf file

root /usr/share/nginx/html/server/pages;

        include /etc/nginx/mime.types;

        location = /favicon.ico {
            alias /usr/share/nginx/html/_next/static/favicon.ico;
            access_log off;
            log_not_found off;
        }

        location /api/ {
            proxy_pass http://backend:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        location /_next/static/ {
            alias /usr/share/nginx/html/static/;
            try_files $uri $uri/ =404;
        }

        location /fonts {
            alias /usr/share/nginx/html/_next/static/fonts;
        }

        location /images {
            alias /usr/share/nginx/html/_next/static/images;
            try_files $uri $uri/ =404;
        }

        location / {
            index  index.html index.html;
            try_files $uri $uri/ /index.html;
            
            # Enable basic authentification
            auth_basic "Restricted Access";
            auth_basic_user_file /etc/nginx/.htpasswd;
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root /usr/share/nginx/html/server/pages;
        }

        error_page 404 /404.html;
        location = /404.html {
            root /usr/share/nginx/html/server/pages;
        }

My next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  trailingSlash: true,
  distDir: "build",
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

My _app.tsx

import type { AppProps } from "next/app";

import "@/app/styles/app.global.scss";
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Layout from "@/layout/layout";

function MyApp({ Component, pageProps }: AppProps) {
  const AnyComponent = Component as any;
  return (
    <Layout>
      <div id="main-wrapper" className="min-h-screen flex flex-col">
        <Header />
        <div className="flex-1">
          <AnyComponent {...pageProps} />
        </div>
        <Footer />
      </div>
    </Layout>
  );
}
export default MyApp;

My index.tsx

import { useEffect } from "react";
import { useRouter } from "next/router";

export default function Home() {
  const router = useRouter();

  useEffect(() => {
    // Redirect only if at the root path ("/")
    if (router.pathname === "/") {
      console.log("Redirecting to /home");
      router.replace("/home");
    }
  }, [router]);

  return null; // Render nothing, since this is a redirect
}

My home page : home.tsx

import HeroSection from "@/components/HeroSection";
import AboutSection from "@/components/AboutSection";
import RessourcesSection from "@/components/RessourcesSection";

export default function Home() {
  return (
    <main className="bg-g-light">
      <HeroSection />
      <div className="bg-light-gradient">
        <AboutSection />
        <RessourcesSection />
      </div>
    </main>
  );
}

My faq page faq.tsx

"use client";
import React from "react";
import { FaDiscord } from "react-icons/fa";

import Button from "@/components/ui/Button";
import { motion } from "framer-motion";

import { EXTERNAL_LINKS, navLinks } from "@/constants/routes";
import FaqSection from "@/components/Faq";
import NavLink from "@/components/NavLink";
import Icon from "@/components/ui/Icon";

const container = {
  hidden: { opacity: 1 },
  visible: {
    opacity: 1,

    transition: {
      delayChildren: 0.2,
      staggerChildren: 0.1,
    },
  },
};

const item = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
  },
};

const FaqPage: React.FC = () => {
  return (
    <main className="bg-staking">
      <section className="py-24 md:py-32">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          variants={container}
          className="container flex flex-wrap items-start gap-6 lg:gap-0"
        >
          <div className="w-full lg:w-5/12 flex flex-col gap-4 items-start lg:pr-8">
            <motion.h1 variants={item} className="text-blue-500">
              FAQ
            </motion.h1>
            <motion.h3 variants={item} className="text-blue-700 mb-2">
              Find all the answers to your questions.
            </motion.h3>
            <Button
              type="out"
              look="secondary"
              size="s"
              onClick={() => window.open(EXTERNAL_LINKS.Discord)}
              leftIcon={<FaDiscord className="!w-4 text-blue-500" />}
              noIcon
            >
              Join Discord
            </Button>
            <Button
              type="out"
              look="secondary"
              size="s"
              leftIcon={
                <Icon
                  phosphor="ShieldCheck"
                  weight="duotone"
                  className="!w-4 text-sand-500 mb-px"
                />
              }
              noIcon
            >
              <NavLink title="Security" details={navLinks.Security} />
            </Button>
          </div>
          <motion.div
            initial={{
              opacity: 0,
              clipPath: "polygon(0 0, 100% 0%, 100% 0, 0 0)",
            }}
            animate={{
              opacity: 1,
              clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
            }}
            transition={{ duration: 0.4, delay: 0.5, ease: "easeOut" }}
            className="w-full lg:w-7/12 bg-purple-100 rounded-2xl p-8"
          >
            <FaqSection
              faqs={[
                "How do I get support?",
              ]}
            />
          </motion.div>
        </motion.div>
      </section>
    </main>
  );
};

export default FaqPage;

when I type a url that doesn't exist on my website like it redirects me to the / page instead of the 404 page on my site.

I'm experiencing a problem with my website, a Single Page Application (SPA) developed with Next.js and deployed behind Nginx. Here's the problem in detail:

I can navigate between all the pages of the site without any problem via the internal links. But when I reload a specific page or try to access a specific URL directly (e.g. /faq or /metrics), the site automatically redirects to the home page (/home), instead of loading the requested page. This problem does not occur in local environments. It only occurs in remote development or production environments.

Here a snippet of nginx.conf file

root /usr/share/nginx/html/server/pages;

        include /etc/nginx/mime.types;

        location = /favicon.ico {
            alias /usr/share/nginx/html/_next/static/favicon.ico;
            access_log off;
            log_not_found off;
        }

        location /api/ {
            proxy_pass http://backend:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        location /_next/static/ {
            alias /usr/share/nginx/html/static/;
            try_files $uri $uri/ =404;
        }

        location /fonts {
            alias /usr/share/nginx/html/_next/static/fonts;
        }

        location /images {
            alias /usr/share/nginx/html/_next/static/images;
            try_files $uri $uri/ =404;
        }

        location / {
            index  index.html index.html;
            try_files $uri $uri/ /index.html;
            
            # Enable basic authentification
            auth_basic "Restricted Access";
            auth_basic_user_file /etc/nginx/.htpasswd;
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root /usr/share/nginx/html/server/pages;
        }

        error_page 404 /404.html;
        location = /404.html {
            root /usr/share/nginx/html/server/pages;
        }

My next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  trailingSlash: true,
  distDir: "build",
  images: {
    unoptimized: true,
  },
};

module.exports = nextConfig;

My _app.tsx

import type { AppProps } from "next/app";

import "@/app/styles/app.global.scss";
import Footer from "@/components/Footer";
import Header from "@/components/Header";
import Layout from "@/layout/layout";

function MyApp({ Component, pageProps }: AppProps) {
  const AnyComponent = Component as any;
  return (
    <Layout>
      <div id="main-wrapper" className="min-h-screen flex flex-col">
        <Header />
        <div className="flex-1">
          <AnyComponent {...pageProps} />
        </div>
        <Footer />
      </div>
    </Layout>
  );
}
export default MyApp;

My index.tsx

import { useEffect } from "react";
import { useRouter } from "next/router";

export default function Home() {
  const router = useRouter();

  useEffect(() => {
    // Redirect only if at the root path ("/")
    if (router.pathname === "/") {
      console.log("Redirecting to /home");
      router.replace("/home");
    }
  }, [router]);

  return null; // Render nothing, since this is a redirect
}

My home page : home.tsx

import HeroSection from "@/components/HeroSection";
import AboutSection from "@/components/AboutSection";
import RessourcesSection from "@/components/RessourcesSection";

export default function Home() {
  return (
    <main className="bg-g-light">
      <HeroSection />
      <div className="bg-light-gradient">
        <AboutSection />
        <RessourcesSection />
      </div>
    </main>
  );
}

My faq page faq.tsx

"use client";
import React from "react";
import { FaDiscord } from "react-icons/fa";

import Button from "@/components/ui/Button";
import { motion } from "framer-motion";

import { EXTERNAL_LINKS, navLinks } from "@/constants/routes";
import FaqSection from "@/components/Faq";
import NavLink from "@/components/NavLink";
import Icon from "@/components/ui/Icon";

const container = {
  hidden: { opacity: 1 },
  visible: {
    opacity: 1,

    transition: {
      delayChildren: 0.2,
      staggerChildren: 0.1,
    },
  },
};

const item = {
  hidden: { y: 20, opacity: 0 },
  visible: {
    y: 0,
    opacity: 1,
  },
};

const FaqPage: React.FC = () => {
  return (
    <main className="bg-staking">
      <section className="py-24 md:py-32">
        <motion.div
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          variants={container}
          className="container flex flex-wrap items-start gap-6 lg:gap-0"
        >
          <div className="w-full lg:w-5/12 flex flex-col gap-4 items-start lg:pr-8">
            <motion.h1 variants={item} className="text-blue-500">
              FAQ
            </motion.h1>
            <motion.h3 variants={item} className="text-blue-700 mb-2">
              Find all the answers to your questions.
            </motion.h3>
            <Button
              type="out"
              look="secondary"
              size="s"
              onClick={() => window.open(EXTERNAL_LINKS.Discord)}
              leftIcon={<FaDiscord className="!w-4 text-blue-500" />}
              noIcon
            >
              Join Discord
            </Button>
            <Button
              type="out"
              look="secondary"
              size="s"
              leftIcon={
                <Icon
                  phosphor="ShieldCheck"
                  weight="duotone"
                  className="!w-4 text-sand-500 mb-px"
                />
              }
              noIcon
            >
              <NavLink title="Security" details={navLinks.Security} />
            </Button>
          </div>
          <motion.div
            initial={{
              opacity: 0,
              clipPath: "polygon(0 0, 100% 0%, 100% 0, 0 0)",
            }}
            animate={{
              opacity: 1,
              clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
            }}
            transition={{ duration: 0.4, delay: 0.5, ease: "easeOut" }}
            className="w-full lg:w-7/12 bg-purple-100 rounded-2xl p-8"
          >
            <FaqSection
              faqs={[
                "How do I get support?",
              ]}
            />
          </motion.div>
        </motion.div>
      </section>
    </main>
  );
};

export default FaqPage;

when I type a url that doesn't exist on my website like it redirects me to the / page instead of the 404 page on my site.

本文标签： Home page redirection problem with a SPA under Nextjs and NginxStack Overflow