Question 215698 in SEO Question posted in
Some basic information to get you started with this can be found here.

Seo – netlify not picking up redirect attempts for nextjs app

I recently converted a react site to use next.js for seo, and it runs perfectly fine aside from the fact that it doesn’t render index.js correctly. I then converted all the code on index to exist at url.com/home, and decided to just redirect from url.com to url.com/home. the only problem is that it doesn’t seem to be working once deployed to netlify.

I have tried adding the redirect from url.com to url.com/home via index.js, next.config.json, a _redirects file, and a netlify.toml file. all in the correct syntax and all working when I run the code locally. but when I push the code to netlify and it deploys I still get the exact same issue every single time in which url.com just displays a blank page and doesnt redirect anywhere.

has anyone had this issue? whether it be the blank page issue or the issue of netlify not implementing redirects, fixing either of the two issues would help me greatly and I would really appreciate it.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
    // pages/index.js

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

const IndexPage = () => {
  const router = useRouter();

  useEffect(() => {
    // Redirect to the homepage when accessing the base URL
    router.replace('/home');
  }, []);

  return null; 
};

export default IndexPage;

    _redirects / /home 301

    netlify.toml
[[redirects]]
  from = "/"
  to = "/home"
  status = 301

    I have three redirects in place counting the index.js page. but the index page never renders, and the redirect never happens, and the other two files I'm trying to use for the redirect are seemingly not being picked up by netlify. there are no issues in the build log, but I've sent netlify an email to try and get further answers.


  2. 0

    It sounds like there might be a few different issues at play here. Let’s try to troubleshoot the problems step by step:

    1. Blank Page Issue:
      If the deployed site is showing a blank page at url.com, it’s possible that the index.js file is not being correctly served or there might be an issue with the initial setup. Here are some things to check:

      • Ensure that the index.js file is correctly named and placed in the pages directory of your Next.js project. It should be named index.js or index.tsx depending on whether you are using JavaScript or TypeScript.

      • Double-check the content of your index.js file to make sure it’s valid and doesn’t contain any errors. Run your Next.js project locally and check if the index.js page renders as expected.

      • If you’ve recently converted your project to Next.js, it’s possible that there might be cached files causing issues. Try running a full build and redeploy on Netlify to see if that resolves the blank page problem.

    2. Redirect Issue:
      If you want to redirect url.com to url.com/home, you can try using the _redirects file. Here’s how you can set up the redirect in the _redirects file:

      In your Next.js project root directory, create a file named _redirects (without any file extension). Inside the _redirects file, add the following line:

      /     /home     302

      The above line tells Netlify to perform a 302 redirect from the root URL (/) to /home.

      Make sure that this _redirects file is present in the build output. You can check this by running a local build of your Next.js project (next build) and verifying that the _redirects file is generated in the /.next directory.

    3. Netlify Redirect Configuration:
      If the above solutions don’t work, there might be an issue with Netlify not picking up the redirect rules. To make sure the redirect is working, you can configure redirects in the netlify.toml file. Create or modify the netlify.toml file in your project root and add the following:

      [[redirects]]
  from = "/*"
  to = "/home/:splat"
  status = 302

      This configuration will redirect all paths to /home, preserving any additional path segments.

    4. Redeploy on Netlify:
      After making any changes to your code, redirects, or configurations, make sure to commit and push those changes to your version control system (e.g., Git). Then trigger a new deployment on Netlify to apply the updates.

    5. Check Netlify Build Logs:
      Netlify provides detailed build logs that can help you identify any errors during the build process. Check the build logs on the Netlify dashboard to see if there are any issues reported during the deployment.

    If you’ve tried all of the above steps and are still experiencing issues, it would be helpful to review any error messages or logs that Netlify provides during the deployment process. Additionally, consider reaching out to Netlify support for further assistance as they can offer specific help related to their platform.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search