title: Nextjs page refresh always bring me to index.js
body: <p>I don't understand why when I refresh a page in my nextjs app, I always get back to the index page.
  I have an e-commerce SPA with a catalogue page in index.js and and the products are displayed through the dynamic [name].js page. If I navigate through the browser refresh or back button, the routing is a mess. I think I miss something in the good practices of nextjs.</p>
  <p>index.js</p>
  <pre><code>import Head from &quot;next/head&quot;;
  import Catalogue from &quot;../../components/Catalogue&quot;;
  import { getProducts } from &quot;../../utils/api&quot;;
  
  const HomePage = ({ products }) =&gt; {
    return (
      &lt;div&gt;
        &lt;Head&gt;
          &lt;title&gt;Catalogue&lt;/title&gt;
          &lt;meta
            name=&quot;description&quot;
            content=&quot;Classe moyenne éditions publie des livres et multiples d'artistes, émergeants ou reconnus, en France et à l'international.&quot;
          /&gt;
          &lt;meta
            name=&quot;keywords&quot;
            content=&quot;Edition d'artiste, Livres, prints, multiples, art books, librairie, concept store, Bookshop, Bookstore&quot;
          /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;
        &lt;/Head&gt;
        &lt;Catalogue products={products} /&gt;
      &lt;/div&gt;
    );
  };
  
  export async function getStaticProps() {
    const products = await getProducts();
    return { props: { products } };
  }
  
  export default HomePage;
  </code></pre>
  <p>[name].js</p>
  <pre><code>const ProductPage = ({ product }) =&gt; {
  
    const router = useRouter();
    if (router.isFallback) {
      return &lt;div&gt;Loading products...&lt;/div&gt;;
    }
  
    return (
      &lt;div className=&quot;wrapper&quot;&gt;
        &lt;Head&gt;
          &lt;title&gt;
            {product.name} {product.author}
          &lt;/title&gt;
        &lt;/Head&gt;
        &lt;div className=&quot;col right&quot; key={product.id}&gt;
          &lt;div className=&quot;colophon&quot; key={product.id}&gt;
            &lt;p&gt;
              {product.annee}
              &lt;br /&gt;
              Format : {product.size} &lt;br /&gt;
              {product.pages} pages
              &lt;br /&gt;
              {product.cover} &lt;br /&gt;
              Printing : {product.printing}
              &lt;br /&gt;
              Paper : {product.paper}
              &lt;br /&gt;
              {product.copies} exemplaires
              &lt;br /&gt;
              {product.price} € + Shipping
              &lt;br /&gt;
              &lt;br /&gt;
            &lt;/p&gt;
            &lt;div className=&quot;colophon&quot;&gt;
              &lt;p style= {{ 
                width: '50%',
                textAlign: 'end',
                color: '#6223f5' }}&gt;
                The website is under maintenance. To order a book, please send us an email at &lt;a href=&quot;mailto:hello@cmeditions.fr&quot; style={{ textDecoration: 'underline' }}&gt;Hello&lt;/a&gt;
              &lt;/p&gt;
              {product.status === true ? (
                &lt;button
                  className=&quot;snipcart-add-item buy-button &quot;
                  variant=&quot;dark&quot;
                  onMouseEnter={(e) =&gt; handleEnter(e)}
                  onMouseOut={(e) =&gt; handleExit(e)}
                  data-item-id={product.id}
                  data-item-price={product.price}
                  data-item-url={router.asPath}
                  data-item-image={getStrapiMedia(product.grid_pic.url)}
                  data-item-name={product.name}
                  data-item-description={product.author}
                  v-bind=&quot;customFields&quot;
                &gt;
                  BUY ME!
                &lt;/button&gt;
              ) : (
                &lt;div className=&quot;text-center mr-10 mb-1&quot;&gt;
                  &lt;div
                    className=&quot;p-2 bg-indigo-800 items-center text-indigo-100 leading-none lg:rounded-full flex lg:inline-flex&quot;
                    role=&quot;alert&quot;
                  &gt;
                    &lt;span className=&quot;flex rounded-full bg-indigo-500 uppercase px-2 py-1 text-xs font-bold mr-3&quot;&gt;
                      Coming soon...
                    &lt;/span&gt;
                    &lt;span className=&quot;font-semibold mr-2 text-left flex-auto&quot;&gt;
                      This article is not available yet.
                    &lt;/span&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              )}
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div &gt;
    );
  };
  
  export default ProductPage;
  
  export async function getStaticProps({ params }) {
    const product = await getProduct(params.name);
    return { props: { product } };
  }
  
  // This function gets called at build time
  export async function getStaticPaths() {
    // Call an external API endpoint to get products
    const products = await getProducts();
    // Get the paths we want to pre-render based on posts
    const paths = products.map(
      (product) =&gt; `/books/${product.name}`
    );
    // We'll pre-render only these paths at build time.
    // { fallback: false } means other routes should 404.
    return { paths, fallback: false };
  }
  </code></pre>
  <p>I read this on the nextjs doc, could it be part of the solution?..</p>
  <blockquote>
  <p>If the page uses an optional catch-all route, supply null, [],
  undefined or false to render the root-most route. For example, if you
  supply slug: false for pages/[[...slug]], Next.js will statically
  generate the page /.</p>
  </blockquote>