Creating/modifying your own directories (eg site.com/post/postId || site.com/product/productId)

[hellocory]

Messing around with the boilerplate, but coming into limitations with my knowledge. Since using this boilerplate, I've just learned about rewriting the directories with the reverse proxies via middleware.ts.

I know that I'm close, but I feel like I'm missing something.

In development mode, my routing works as expected. In production, the routing disappears like it never even happened.

Here is a screenshot of my routes:

I know this isn't perfect yet, but it should still work.

This is the Middleware.ts file:

import { NextRequest, NextResponse } from 'next/server';
import { getToken } from 'next-auth/jwt';

export const config = {
  matcher: [
    /*
     * Match all paths except for:
     * 1. /api routes
     * 2. /_next (Next.js internals)
     * 3. /_static (inside /public)
     * 4. all root files inside /public (e.g. /favicon.ico)
     */
    '/((?!api/|_next/|_static/|_vercel|[\\w-]+\\.\\w+).*)',
  ],
};

export default async function middleware (req: NextRequest) {
  const url = req.nextUrl;

  // Get hostname of request (e.g. demo.vercel.pub, demo.localhost:3000)
  const hostname = req.headers
    .get('host')!
    .replace('.localhost:3000', `.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`);

  const searchParams = req.nextUrl.searchParams.toString();
  // Get the pathname of the request (e.g. /, /about, /blog/first-post)
  const path = `${url.pathname}${
    searchParams.length > 0 ? `?${searchParams}` : ''
  }`;
  console.log(path);

  // rewrites for app pages
  if (hostname == `portal.${process.env.NEXT_PUBLIC_ROOT_DOMAIN}`) {
    const session = await getToken({ req });
    if (!session && path !== '/login') {
      return NextResponse.redirect(new URL('/login', req.url));
    } else if (session && path == '/login') {
      return NextResponse.redirect(new URL('/', req.url));
    }
    return NextResponse.rewrite(
      new URL(`/portal${path === '/' ? '' : path}`, req.url),
    );
  }

  // rewrite root application to `/home` folder
  if (
    hostname === 'localhost:3000' ||
    hostname === process.env.NEXT_PUBLIC_ROOT_DOMAIN
  ) {
    return NextResponse.rewrite(
      new URL(`/home${path === '/' ? '' : path}`, req.url),
    );
  }

  // rewrite everything else to `/[domain]/[slug] dynamic route
  return NextResponse.rewrite(new URL(`/${hostname}${path}`, req.url));
}

As you can see I have not touched it (except modifying the "app directory", but when I try the routes in production, nothing works appropriately (except changing the primary sub-domain, that worked just fine).

The /post page displays the text "Text" as a node element. That's it.

When I go to the localhost version, on my /post page I get "test".

On localhost:

On production:

Can someone give me some insight so I can continue using this and not need to move into something else a little less complex?

[hellocory]

Okay. I believe I had fixed this issue myself. I had to redeploy my build completely. For some reason Vercel kept the same build cache and wouldn't update. If that happens, make sure you redeploy the newest build. You may have to swap branches or something. I gots my routing now.