Static app hosted on S3 while using dynamic routes. Possible?

[watch-janick]

Hello,

I would like to create a static app that I can host on S3 while using dynamic routes for some specific pages. All the data will be loaded client-side only.

I tried to do it without using getStaticPaths or by returning an empty paths array and by using fallback to true but it doesn't work.

For example I would have:
index.html
products/index.html (page for /products)
products/[id].html (catch-all page for /products/1)
...

I guess the complication would also come from the routing configuration on S3 to make sure everything is routed to the right page.

Any ideas?

[watch-janick]

@timneutkens I believe Vercel dashboard has been created in a similar fashion right?

I can't get my head around it 🤯

Your help on the subject would be awesome 🙏

[vital-tech-results]

my understanding of S3 on AWS is that it only hosts static HTML sites; it can not run node.js in the background. I think AWS offers other solutions that can run node, but not S3.

[watch-janick]

You can generate static HTML sites with NextJS using the next export command :)

[tseidler]

Edit Just noticed that this is 24 days old. Ah well. I'll leave my reply for the next user :)

My own site runs on S3 (with cloudfront) and it works :}.
I think what you're trying to do is similar to these pages, right?

https://bettershifting.com/frequently-asked-questions/
https://bettershifting.com/frequently-asked-questions/how-do-i-check-the-battery-charge-level/

I have an index.js (for the index page..) and a [slug].js in that same directory.

My getStaticPaths (in [slug].js looks like this:

  export async function getStaticPaths() {
    const all_faq_slugs = await all_slugs();
    const paths = all_faq_slugs.map(faq_slug => ({
      params: { slug: faq_slug },
    }));

    return {
      paths: paths,
      fallback: false
    };
  }

I don't have one in index.js.

[watch-janick]

Hello @tseidler and thank you for your answer :)

My issue was that I couldn't generate all the possible URLs as it's for a back-office and you can create new entries.

I understand how it works when you can list all the pages with paths but when there's an indefinite number of paths I haven't found a solution yet except using Create-React-App.

Thanks!

[tseidler]

aha... yeah that makes sense :}. For my site I am the only content editor and I run a sync to S3 whenever I'm done editing / writing content.
If you have a backend with a back-office then things will be a bit more complicated.

You could run an AWS codepipeline that builds and syncs to S3 whenever the back-end change something, but it's not ideal :}

[DaniAkash]

There's a tricky solution to this problem.

Next.js expects you to specify all possible routes during static site generation. However, if you have more number of routes that cannot be defined, it will redirect you to the 404 page after deployment.

Say you have the following pages:

• index.js
• [all].js

Now if you visit -> /my-name, you'd ideally expect it to load the generated [all].html file - which is impossible in static site deployment. But you can build your custom 404 page which contains the following logic:

import Router from "next/router";
import { useEffect, useState } from "react";

export default function Custom404() {
  const [isNotFound, setIsNotFound] = useState(false);

  useEffect(() => {
    // Your condition that can validate the URL
    const pathNameArray = window.location.pathname.split("/");
    if (pathNameArray.length <= 2) {
      Router.replace(window.location.pathname); // Redirect to the right page...
    } else {
      setIsNotFound(true);
    }
  }, []);

  if (isNotFound) return <h1>404 - Page Not Found</h1>;

  return null;
}

This will ensure the right page is rendered even if you weren't able to specify all the paths during static site generation.

Even though this approach works, it will lead to browser thinking your site is throwing "404" response code so not very SEO friendly...

I'd recommend this approach if you are building a native electron app / any other app that doesn't require SEO but if you are building a web app, you should go with SSR deployments...

[FelipeBodelon]

This has become my go to solution for a static app without serverside rendering and dynamic routes, when I can't specify all the paths during static site generation.

To avoid getting the 404 error response, while still getting to the 404 page, you can set create a custom error response on your Cloudfront distribution hosting your s3 data.

[sambP]

Thanks @DaniAkash, it worked for me, but it resulted in a state loss of the react app. Sort of a reload. This is a bit shitty, because of some animations I used.
Do you have the same effect, or is my a broken?

I also tried to write a lambda@edge origin-request with redirects to the [id] file, but this resulted in the same effect.

exports.handler = (event, context, callback) => {
  const request = event.Records[0].cf.request;
  const uriArray = request.uri.split('/');
  if (uriArray.length === 4 && uriArray[1] === 'posts')
    request.uri = '/posts/[_id]/index.html';
  callback(null, request);
};

[STEVEOO6]

To prevent an infinite loop, I leverage some of the router functions to determine if the redirect location represents a valid route.

import React from 'react'
import { useRouter } from 'next/router'
import { getRouteRegex } from 'next/dist/shared/lib/router/utils/route-regex'
import { getClientBuildManifest } from 'next/dist/client/route-loader'
import { removePathTrailingSlash } from 'next/dist/client/normalize-trailing-slash'
import { parseRelativeUrl } from 'next/dist/shared/lib/router/utils/parse-relative-url'
import { isDynamicRoute } from 'next/dist/shared/lib/router/utils/is-dynamic'
import { denormalizePagePath } from 'next/dist/server/denormalize-page-path'

async function getDoesLocationMatchPage(location) {
  const pages = await getPageList()
  let parsed = parseRelativeUrl(location)
  let { pathname } = parsed
  return pathMatchesPage(pathname, pages)
}

async function getPageList() {
  if (process.env.NODE_ENV === 'production') {
    const { sortedPages } = await getClientBuildManifest()
    return sortedPages
  } else {
    if (typeof window !== 'undefined' && window.__DEV_PAGES_MANIFEST) {
      return window.__DEV_PAGES_MANIFEST.pages
    }
  }
  return []
}

function pathMatchesPage(pathname: string, pages: string[]) {
  const cleanPathname = removePathTrailingSlash(denormalizePagePath(pathname))
  if (pages.includes(cleanPathname)) {
    return true
  }
  const page = pages.find(
    (page) => isDynamicRoute(page) && getRouteRegex(page).re.test(cleanPathname)
  )
  if (page) {
    return true
  }
  return false
}

function weAreLost(router) {
  return router.pathname !== router.asPath
}

export default function PageNotFound() {
  const router = useRouter()
  const [isNotFound, setIsNotFound] = React.useState(false)

  const processLocationAndRedirect = async (router) => {
    if (weAreLost(router)) {
      const targetIsValidPage = await getDoesLocationMatchPage(router.asPath)
      if (targetIsValidPage) {
        await router.replace(router.asPath)
        return
      }
    }
    setIsNotFound(true)
  }

  React.useEffect(() => {
    if (router.isReady) {
      processLocationAndRedirect(router)
    }
  }, [router.isReady])

  if (!isNotFound) return null

  return (
    <h1>404 - Page Not Found</h1>
  )
}

[joncursi]

Has anyone been able to get Dynamic Routes / Custom 404 setup to work with the new App Router (introduced in Next 13.4) on a static site?

I can't seem to get next export to understand that /hey/[slug] should be exported as a static route. This wasn't an issue with the pages router:

Contents of hey/[slug]/page.tsx:

import React from 'react';

const Page = () => {
  return <div>Nothing special here</div>;
};

export default Page;

Update: I was able to get next export to detect this dynamic segment as a static route by adding the following to hey/[slug]/page.tsx:

import React from 'react';

// Added:
export const dynamic = 'force-static';

const Page = () => {
  return <div>Nothing special here</div>;
};

export default Page;

However, I still don't see hey/[slug].html appearing in my out folder, which is the final piece of the puzzle...

[joncursi]

To increase visibility, I started a new discussion topic on this here - #53173

[gowth6m]

How to deploy nextjs static project (pages router) with dynamic routes to S3

YouTube tutorial
GitHub repo

Setup a Custom404 page that will handle routing from client side like SPA. On S3 settings, set error page to 404.html. Also don't use trailing slash.

import React, { useEffect, useState } from "react";
import { useRouter } from "next/router";
import { isDynamicRoute } from "next/dist/shared/lib/router/utils";
import { getRouteRegex } from "next/dist/shared/lib/router/utils/route-regex";
import { getClientBuildManifest } from "next/dist/client/route-loader";

async function pageExists(location: string) {
    const { sortedPages } = await getClientBuildManifest();

    const pathname = location === "/" ? location : location.replace(/\/$/, "");

    return (
        sortedPages.includes(pathname) ||
        sortedPages.some((page) => {
            return (
                isDynamicRoute(page) && getRouteRegex(page).re.test(pathname)
            );
        })
    );
}

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

    const [isNotFound, setIsNotFound] = useState(false);

    useEffect(() => {
        if (router.isReady) {
            pageExists(router.asPath).then((exists) => {
                if (!exists) {
                    setIsNotFound(true);
                } else router.replace(router.asPath);
            });
        }
    }, [router.isReady, router.asPath, router]);

    if (!isNotFound) {
        return <div>loading</div>;
    }

    return <div>Custom404</div>;
};

export default Custom404;

[Sam152]

This solution worked great for me, thank you for sharing.

[Nitrammets]

This worked, thx!

[dgadelha]

This solution is great and works fine, thanks a lot! Just a small detail, I had to replace:

const pathname = location === "/" ? location : location.replace(/\/$/, "");

with something like:

const locationPath = new URL(location, window.location.origin).pathname;
const pathname = locationPath === "/" ? "/" : locationPath.replace(/\/$/, "");

because Next's router.asPath includes the query string, which causes the regex test to fail.
Still unsure whether using window.location.origin is fine or if I should stick around with something hardcoded like "http://test" instead.

[matheusslg]

So, not sure if it's too late to share my solution, but here is a temporary fix that might help you guys. In my current project, we are using Next.js 15.2 + Cloudfront + S3 Bucket. The next config is using output: 'export', and we are not using traillingSlash. The solution that we came to solve this temporarily until Vercel releases 15.3 or 15.4 (check here), is to use a hybrid approach between app and page router. Basically, we have both folders in our project, app (for static routes), and pages (for dynamic routes). The layout.tsx is the one responsible for having the HTML and body tags, he's the "owner" of the project, let's say. In the other hand, I created the _app.tsx inside the pages folder, which imports dynamically (using next/dynamic) any required inner layout.tsx that I'm using in my app router folder structure. I also created a root.tsx file, which shares all the wrappers and providers to the main children, so I could use that root to wrap both layout.tsx and _app.tsx children. The downside of having these hybrid folders is, the context is not shareable between app and pages router, which causes a page reload/refresh whenever you enter a dynamic route. Anyway, that's the price you pay for this temporary fix. Check the example below:

Directory Structure

We maintain parallel routing structures:

src/
  ├── root.tsx                 # Root wrapper, this contains all the shared providers/wrappers
  ├── app/                     # App Router routes (most of the app)
  │   ├── layout.tsx           # Main layout, this adds the HTML/body tags
  │   └── dashboard/
  │       └── posts/       
  │           └── page.tsx     # Default listing page for posts using app router
  │
  └── pages/                   # Pages Router routes (for dynamic routes)
      ├── _app.tsx             # Wrapper that applies layouts from App Router
      └── dashboard/
          └── posts/
              └── [id].tsx     # Detail view (dynamic route)

On the Cloudfront side, we managed to create a custom function that checks with a regex whenever the requested URL contains a matching UUID, so it redirects to the [id].html page from your Next output.

function handler(event) {
    var request = event.request;
    var uri = request.uri;
    
    // If the URI is '/', serve index.html
    if (uri === '/') {
        request.uri = '/index.html';
        return request;
    }
    
    // Split the path into segments
    var segments = uri.split('/').filter(function(segment) {
        return segment.length > 0;
    });
    
    // Only replace the last segment if it's in a dynamic route pattern
    if (segments.length > 0) {
        var lastSegment = segments[segments.length - 1];
        
        // Check if the segment looks like an ID/UUID
        // UUID pattern: 8-4-4-4-12 hex digits
        // or numeric ID pattern
        var isUUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(lastSegment);
        var isNumericId = /^\d+$/.test(lastSegment);
        
        if (isUUID || isNumericId) {
            // Remove the last segment and replace it with [id].html
            segments.pop();
            var basePath = segments.join('/');
            request.uri = '/' + (basePath ? basePath + '/' : '') + '[id].html';
            return request;
        }
    }
    
    // Default behavior for static routes
    if (uri.slice(-5) !== '.html' && uri.indexOf('.') === -1) {
        request.uri = uri + '.html';
    }
    
    return request;
}

The downside of using the function is, you must always use the [id] folder pattern, or if you want to use [slug], you would need to adapt that regex to match with slugs as well. On the other hand, this proposal was not made to run in the long term, but it should be helpful if you're trying to avoid a whole project refactor.

[GabenGar]

If you have to use pages router for that, might as well ditch app router altogether and not deal with mixed router problems.

[matheusslg]

@GabenGar I'm actually hoping Vercel releases a fix for that in 15.3/15.4, as they mentioned here. I don't want to apply a whole refactor to the pages router at this point, I think it may be worth waiting until they release. My current project isn't even in prod, so in my case, it's still valid as a temporary solution.

[Rakhsan]

If you have to use pages router for that, might as well ditch app router altogether and not deal with mixed router problems.

seriously what's the point of nextjs anymore not using app router might as well use vite we are not using any feature of nextjs as SPA so I ma check out tanstack router + vite

[robertveloso]

my 2 cents on this

'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useRef, useState } from 'react';
import dynamic from 'next/dynamic';

const HomePage = dynamic(() => import('./page'), { ssr: false });
const ChatPage = dynamic(() => import('./chat/page'), { ssr: false });
const CategoryPage = dynamic(() => import('./category/page'), { ssr: false });
const LoginCallbackPage = dynamic(() => import('./login/callback/page'), { ssr: false });

export default function NotFound() {
  const pathname = usePathname();
  const [Component, setComponent] = useState<React.ComponentType | null>(null);
  const [pageProps, setPageProps] = useState<any>(null);
  const runOnce = useRef(false);

  useEffect(() => {
    if (runOnce.current) return;
    runOnce.current = true;

    console.log('pathname', pathname);
    if (pathname === '/') {
      setComponent(() => HomePage);
      setPageProps({});
      return;
    }

    if (pathname.startsWith('/chat/')) {
      const id = pathname.split('/')[2];
      if (id && id !== '[id]' && !id.includes('.html')) {
        setPageProps({ id });
        setComponent(() => ChatPage);
        return;
      }
    }

    if (pathname.startsWith('/category/')) {
      const id = pathname.split('/')[2];
      if (id && id !== '[id]' && !id.includes('.html')) {
        setPageProps({ id });
        setComponent(() => CategoryPage);
        return;
      }
    }

    if (pathname.startsWith('/login/callback')) {
      setPageProps({});
      setComponent(() => LoginCallbackPage);
      return;
    }
  }, [pathname]);

  if (!runOnce.current) {
    return null
  }

  if (Component && pageProps) {
    return <Component {...pageProps} />;
  }

  return (
    <div className="flex-1 flex flex-col items-center justify-center p-4">
      <h1 className="text-4xl font-bold mb-4">404</h1>
      <p className="text-xl mb-4">Page not found</p>
      <Link href="/" className="text-blue-500 hover:text-blue-600 underline">
        Return Home
      </Link>
    </div>
  );
}

on public folder using cloudflare, _redirects

/*                        /index.html          200
/chat/*                   /index.html          200!
/category/*               /index.html          200!
/login/callback/*         /index.html          200!