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

Nextjs path invoked from browser return 404 (Nextjs, NGINX) – SEO

How does the nextjs handle SEO? I am trying to render page by invoking it directly (localhost:8080/about) from the browser, but NGINX is returning 404. The link to same page embedded in the home page is working but the page can not be loaded directly using URL. Are additional configurations needed either in NGINX or Nextjs app. enter image description here

Tags:

5

Answers


  1. 0

    NextJS serves the site itself and doesn’t use nginx or Apache.

    In your package.json file, you should have a next command in the scripts section. I normally have:

      "scripts": {
    "build": "next build",
    "dev": "next"
  }

    Running yarn dev or npm run dev will bootstrap the site and allow you to connect to the site locally and see how it handles 404s and other errors.

    When you deploy your site, it will be using this kind of server set-up rather than either of the servers mentioned above.

    I hope that’s helpful.

    Login or Signup to reply.
  2. 0

    Could you share some configuration code?
    Out of the box nextjs should display the default export react component that lives under pages/about.js or pages/about/index.js /about when hitting https://localhost:8080/about.

    Login or Signup to reply.
  3. 0

    Since you’re using NGINX as your web server, you may want to reverse proxy to your NextJS app. https://medium.com/@deresegetachew/serving-react-spa-using-nginx-and-reverse-proxy-4e5485c814a0

    React/NextJS uses port 3000 by default. Your URL in your post is pointing to port 8080. NGINX is not used by NextJS by default, so I believe a different web server is rendering your page, i.e. NGINX.

    When you run the following commands on your nextjs project, you’ll see the following output and it’ll say what port is being served. Then try viewing that with your web browser.

    $ npm install
$ npm run dev
...
[ wait ]  compiling ...
[ ready ] compiled successfully - ready on http://localhost:3000

    If your have a server.js in your projects top directory, or you can add one to configure which port your app will serve. https://nextjs.org/docs/old#custom-server-and-routing

    If your web server has a firewall enabled, not all ports will be available.

    Login or Signup to reply.
  4. 0

    Next.Js has it’s on server so you don’t have to use another one.

    Just run the command npm run dev after installing the next.js using the command prompt for running locally in you machine.

    Login or Signup to reply.
  5. 0

    maybe you run application on port 3000 and when you want to serve on another port for example 80 or 8080, you need redirect Nginx requests to port 3000 in this way that you make redirection in Nginx’s config file :
    (replace server-ip with your server ip or localhost or 127.0.0.1)

    location / {
                proxy_pass http://<server-ip>:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "upgrade";
                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;
                proxy_set_header X-Forwarded-Host $host;
                proxy_set_header X-Forwarded-Port $server_port;
        }

    although you can run PM2 for manage and run your application on the server easily

    as I saw your nginx serve nothing on 8080 port, that’s why you didn’t reach to your application on http://localhost:8000, so you can test with http://localhost:3000 because default port is 3000

    that’s all it.

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

Back To Top
Search