Problem with getStaticPaths and getStaticProps

[thesobercoder]

This might be the dumbest question on this forum, but I had to ask it. Maybe I am understanding this all wrong, but my goal is to make the dynamic routes work in an exported next js app. Based on what I understood from the docs, I have to declare all possible routes in getStaticPaths for SSG to work properly, but the routes can be based on which user logs in and might be completely database driven, which is not possible to know at build time. Considering that scenario, is NextJS SSG a good option, knowing that I have limitation of not being able to run server side rendered next app.

The pages -

pages/index.js

import Link from "next/link";

const Home = () => (
  <div>
    <h1>Test site!</h1>
    <p>
      View our{" "}
      <Link href={`/product/coffee`}>
        <a>espresso product</a>
      </Link>
      !
    </p>
  </div>
);

export default Home;

pages/product/[name].js

const Product = ({ name }) => {
  return (
    <div>
      <h1>Hi {name}</h1>
      <p>Welcome to our product page for {name}!</p>
    </div>
  );
};

export async function getStaticProps(context) {
  return {
    props: { name: context.params.name },
  };
}

export async function getStaticPaths() {
  return {
    paths: ["/product/coffee"],
    fallback: false,
  };
}

export default Product;

[Timer]

Next.js would work fine in this scenario!

goal is to make the dynamic routes work in an exported next js app [...] not possible to know at build time

You'd want to remove getStaticPaths and getStaticProps in this case, as Next.js will automatically export the page statically. You'll then need to read the dynamic parameter from useRouter() and fetch your data client-side.

// pages/product/[name].js
import { useRouter } from "next/router";

const Product = () => {
  const r = useRouter();
  const { name } = r.query;
  if (!name) {
    return (
      <div>
        <p>Loading...</p>
      </div>
    );
  }

  // TODO: data fetching
  return (
    <div>
      <h1>Hi {name}</h1>
      <p>Welcome to our product page for {name}!</p>
    </div>
  );
};

---

I'd highly suggest not using next export for your use case, however.

[thesobercoder]

@Timer Thanks for the reply and the example, however when I run the exported app and try to navigate via the link, the URL changes but the product page is not rendered

I'd highly suggest not using next export for your use case, however.

The limitation I have is that I have been provided a static site hosting and there is no other way for me to host the site without next export. In that case would you suggest not using NextJS at all?

[Timer]

when I run the exported app and try to navigate via the link, the URL changes but the product page is not rendered

You'll need to provide your code so we can find the bug in your application.

---

The limitation I have is that I have been provided a static site hosting and there is no other way for me to host the site without next export. In that case would you suggest not using NextJS at all?

Next.js works for this use case, even using next export. You'd have this same exact constraint with any other framework since you cannot use a server.
Using next export in this way just isn't the happy path, but as you've explained, it's a requirement for whatever you're doing!

Note using Vercel gives you static hosting while being able to use the fallback: true flag, so you may want to look into that.

[thesobercoder]

@Timer I've pushed my code to this repo. I wish I could use Vercel hosting, things would have been much better, but I can't due to my org policies. But thanks a ton for taking a look at my problem!

[Timer]

Your index page is improperly using <Link>, it should be this:

      <Link href="/product/[name]" as={`/product/coffee`}>
        <a>espresso product</a>
      </Link>

The remaining issue is due to improper usage of sirv that we cannot give support for.

However, you do need to remove --single because Next.js apps are not SPAs:

    "serve": "sirv out --port 8080 --cors"

You'll need to setup proper rewrite rules for your local testing and in production, whatever host you end up using.

[thesobercoder]

@Timer Thanks a ton, it is working after the two fixes you mentioned, however I'm very interested to know what other rewrite rules does the developer need to be aware of irrespective of the hosting environment, when they have a use-case like mine. Is there any documentation regarding this?