The all-in-one starter kit for building platforms on Vercel

What

This PR migrates the code base to using TypeScript, as recommended by @leerob in #3. It also includes a number of other changes, including the following:

• Migrate entire codebase to TypeScript
• Add global / reusable fetcher function (lib/fetcher)
• Adds request methods bouncers to "most" API endpoints
• Added @/types import alias
• Added types/ directory for all custom types
• Removed some unnecessary console.log's
• Removed jsconfig.json
• Minor api endpoint restructuring for domain endpoints
• Renamed GitHub client ID/secret env vars to better fitting names
• Lots of cleanup / code standard improvements
• Move major API functionality to lib/ directory

Overall, GitHub OAuth has a lot fewer steps to get set up than Twitter OAuth. I think this would help those trying to get the project set up and running locally. Plus, with next-auth, you can always switch to other providers if you want.

Thoughts?

What

A nice improvement to offer out of the box would be error prompts for the login page (User can see if it's an issue with something they did, or a server-side issue, etc). Seeing as react-hot-toast is already used in other places, we could use that combined with next/router to check for any error parameters returned by next-auth

I'm getting the following error.

[next-auth][error][OAUTH_V1_GET_ACCESS_TOKEN_ERROR] 
https://next-auth.js.org/errors#oauth_v1_get_access_token_error undefined {
  statusCode: 403,
  data: '{"errors":[{"message":"You currently have Essential access which includes access to Twitter API v2 endpoints only. If you need access to this endpoint, you’ll need to apply for Elevated access via the Developer Portal. You can learn more here: https://developer.twitter.com/en/docs/twitter-api/getting-started/about-twitter-api#v2-access-leve","code":453}]}\n'
}

I am following along with the blog post but things do look different for me. For example, my Twitter dev dashboard does not have "enable 3-legged" option. Just the options in the screenshot below

I can't even get the login button to prompt for Twitter oAuth without changing the callback URL in step 13 from the blog post suggestion of 'http://localhost:3000/api/auth/callback/twitter' (does not work) to 'http://app.localhost:3000/api/auth/callback/twitter' (prompts but get console error above)

If I follow the blog post exactly I get this

[next-auth][error][GET_AUTHORIZATION_URL_ERROR] 
https://next-auth.js.org/errors#get_authorization_url_error undefined {
  statusCode: 403,
  data: `<?xml version='1.0' encoding='UTF-8'?><errors><error code="415">Callback URL not approved for this client application. Approved callback URLs can be adjusted in your application settings</error></errors>`
}
[next-auth][error][SIGNIN_OAUTH_ERROR] 
https://next-auth.js.org/errors#signin_oauth_error undefined {
  error: {
    statusCode: 403,
    data: `<?xml version='1.0' encoding='UTF-8'?><errors><error code="415">Callback URL not approved for this client application. Approved callback URLs can be adjusted in your application settings</error></errors>`
  },
  provider: {
    id: 'twitter',
    name: 'Twitter (Legacy)',
    type: 'oauth',
    version: '1.0A',
    authorization: { url: 'https://api.twitter.com/oauth/authenticate', params: {} },
    accessTokenUrl: 'https://api.twitter.com/oauth/access_token',
    requestTokenUrl: 'https://api.twitter.com/oauth/request_token',
    profileUrl: 'https://api.twitter.com/1.1/account/verify_credentials.json?include_email=true',
    profile: [Function: profile],
    clientId: 'xxxx-removed-xxxx',
    clientSecret: 'xxxx-removed-xxxx',
    signinUrl: 'http://app.localhost:3000/api/auth/signin/twitter',
    callbackUrl: 'http://app.localhost:3000/api/auth/callback/twitter'
  },
  message: undefined
}

Any help or suggestions is appreciated

I'm trying to deploy this to Vercel, and it keeps failing when it gets to NPM build

[07:35:06.182] Previous build cache not available [07:35:07.389] Cloning completed: 1.365s [07:35:07.667] Running "vercel build" [07:35:08.354] Vercel CLI 28.4.17 [07:35:08.802] Warning: Detected "engines": { "node": ">=14.0.0" } in your package.json that will automatically upgrade when a new major Node.js Version is released. Learn More: http://vercel.link/node-version [07:35:08.820] Installing dependencies... [07:35:10.147] npm ERR! code ERESOLVE [07:35:10.151] npm ERR! ERESOLVE could not resolve [07:35:10.151] npm ERR! [07:35:10.151] npm ERR! While resolving: [email protected] [07:35:10.151] npm ERR! Found: [email protected] [07:35:10.152] npm ERR! node_modules/react [07:35:10.152] npm ERR! react@"^18.2.0" from the root project [07:35:10.152] npm ERR! peer react@"^16 || ^17 || ^18" from @headlessui/[email protected] [07:35:10.152] npm ERR! node_modules/@headlessui/react [07:35:10.152] npm ERR! @headlessui/react@"^1.4.3" from the root project [07:35:10.152] npm ERR! 12 more (@vercel/analytics, next, next-auth, react-dom, ...) [07:35:10.152] npm ERR! [07:35:10.153] npm ERR! Could not resolve dependency: [07:35:10.153] npm ERR! peer react@">=16.x <=17.x" from [email protected] [07:35:10.153] npm ERR! node_modules/next-mdx-remote [07:35:10.156] npm ERR! next-mdx-remote@"^3.0.8" from the root project [07:35:10.156] npm ERR! [07:35:10.156] npm ERR! Conflicting peer dependency: [email protected] [07:35:10.156] npm ERR! node_modules/react [07:35:10.157] npm ERR! peer react@">=16.x <=17.x" from [email protected] [07:35:10.157] npm ERR! node_modules/next-mdx-remote [07:35:10.157] npm ERR! next-mdx-remote@"^3.0.8" from the root project [07:35:10.157] npm ERR! [07:35:10.157] npm ERR! Fix the upstream dependency conflict, or retry [07:35:10.157] npm ERR! this command with --force, or --legacy-peer-deps [07:35:10.157] npm ERR! to accept an incorrect (and potentially broken) dependency resolution. [07:35:10.158] npm ERR! [07:35:10.158] npm ERR! See /vercel/.npm/eresolve-report.txt for a full report. [07:35:10.158] [07:35:10.158] npm ERR! A complete log of this run can be found in: [07:35:10.158] npm ERR! /vercel/.npm/_logs/2022-11-16T07_35_09_253Z-debug-0.log [07:35:10.170] Warning: Retrying "Install Command" with --legacy-peer-deps which may accept a potentially broken dependency and slow install time. [07:35:41.225] [07:35:41.225] > postinstall [07:35:41.225] > prisma generate || true [07:35:41.226] [07:35:42.779] Prisma schema loaded from prisma/schema.prisma [07:35:44.509] [07:35:44.510] ✔ Generated Prisma Client (3.8.1 | library) to ./node_modules/@prisma/client in 213ms [07:35:44.510] You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client [07:35:44.510] [07:35:44.510] import { PrismaClient } from '@prisma/client' [07:35:44.510] const prisma = new PrismaClient() [07:35:44.510] [07:35:44.615] [07:35:44.616] added 622 packages in 34s [07:35:44.616] [07:35:44.617] 221 packages are looking for funding [07:35:44.617] run npm fund for details [07:35:44.643] Detected Next.js version: 13.0.2 [07:35:44.651] Detected package-lock.json generated by npm 7+... [07:35:44.651] Running "npm run build" [07:35:45.066] [07:35:45.066] > prebuild [07:35:45.066] > prisma generate [07:35:45.066] [07:35:46.616] Prisma schema loaded from prisma/schema.prisma [07:35:48.383] [07:35:48.384] ✔ Generated Prisma Client (3.8.1 | library) to ./node_modules/@prisma/client in 236ms [07:35:48.384] You can now start using Prisma Client in your code. Reference: https://pris.ly/d/client [07:35:48.384] [07:35:48.384] import { PrismaClient } from '@prisma/client' [07:35:48.384] const prisma = new PrismaClient() [07:35:48.384] [07:35:48.534] ┌─────────────────────────────────────────────────────────┐ [07:35:48.535] │ Update available 3.8.1 -> 4.6.1 │ [07:35:48.536] │ │ [07:35:48.536] │ This is a major update - please follow the guide at │ [07:35:48.536] │ https://pris.ly/d/major-version-upgrade │ [07:35:48.536] │ │ [07:35:48.537] │ Run the following to update │ [07:35:48.537] │ npm i --save-dev [email protected] │ [07:35:48.537] │ npm i @prisma/[email protected] │ [07:35:48.537] └─────────────────────────────────────────────────────────┘ [07:35:48.548] [07:35:48.549] > build [07:35:48.549] > next build [07:35:48.549] [07:35:49.116] Attention: Next.js now collects completely anonymous telemetry regarding usage. [07:35:49.117] This information is used to shape Next.js' roadmap and prioritize features. [07:35:49.117] You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: [07:35:49.117] https://nextjs.org/telemetry [07:35:49.117] [07:35:49.257] info - Linting and checking validity of types... [07:35:58.998] info - Creating an optimized production build... [07:36:27.886] info - Compiled successfully [07:36:27.887] info - Collecting page data... [07:36:28.569] Error: Cannot find module '@babel/core' [07:36:28.570] Require stack: [07:36:28.570] - /vercel/path0/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js [07:36:28.570] - /vercel/path0/node_modules/@mdx-js/mdx/node_modules/remark-mdx/extract-imports-and-exports.js [07:36:28.570] - /vercel/path0/node_modules/@mdx-js/mdx/node_modules/remark-mdx/index.js [07:36:28.570] - /vercel/path0/node_modules/@mdx-js/mdx/index.js [07:36:28.571] - /vercel/path0/node_modules/next-mdx-remote/dist/serialize.js [07:36:28.571] - /vercel/path0/node_modules/next-mdx-remote/serialize.js [07:36:28.571] - /vercel/path0/.next/server/pages/_sites/[site]/[slug].js [07:36:28.571] - /vercel/path0/node_modules/next/dist/server/require.js [07:36:28.571] - /vercel/path0/node_modules/next/dist/server/load-components.js [07:36:28.572] - /vercel/path0/node_modules/next/dist/export/worker.js [07:36:28.572] - /vercel/path0/node_modules/next/dist/build/worker.js [07:36:28.572] - /vercel/path0/node_modules/next/dist/compiled/jest-worker/processChild.js [07:36:28.572] at Function.Module._resolveFilename (node:internal/modules/cjs/loader:985:15) [07:36:28.572] at Function.mod._resolveFilename (/vercel/path0/node_modules/next/dist/build/webpack/require-hook.js:23:32) [07:36:28.572] at Function.Module._load (node:internal/modules/cjs/loader:833:27) [07:36:28.573] at Module.require (node:internal/modules/cjs/loader:1057:19) [07:36:28.573] at require (node:internal/modules/cjs/helpers:103:18) [07:36:28.573] at Object. (/vercel/path0/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js:12:13) [07:36:28.573] at Module._compile (node:internal/modules/cjs/loader:1155:14) [07:36:28.573] at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10) [07:36:28.573] at Module.load (node:internal/modules/cjs/loader:1033:32) [07:36:28.573] at Function.Module._load (node:internal/modules/cjs/loader:868:12) { [07:36:28.574] code: 'MODULE_NOT_FOUND', [07:36:28.574] requireStack: [ [07:36:28.574] '/vercel/path0/node_modules/@babel/plugin-proposal-object-rest-spread/lib/index.js', [07:36:28.574] '/vercel/path0/node_modules/@mdx-js/mdx/node_modules/remark-mdx/extract-imports-and-exports.js', [07:36:28.576] '/vercel/path0/node_modules/@mdx-js/mdx/node_modules/remark-mdx/index.js', [07:36:28.576] '/vercel/path0/node_modules/@mdx-js/mdx/index.js', [07:36:28.576] '/vercel/path0/node_modules/next-mdx-remote/dist/serialize.js', [07:36:28.576] '/vercel/path0/node_modules/next-mdx-remote/serialize.js', [07:36:28.576] '/vercel/path0/.next/server/pages/_sites/[site]/[slug].js', [07:36:28.577] '/vercel/path0/node_modules/next/dist/server/require.js', [07:36:28.577] '/vercel/path0/node_modules/next/dist/server/load-components.js', [07:36:28.577] '/vercel/path0/node_modules/next/dist/export/worker.js', [07:36:28.577] '/vercel/path0/node_modules/next/dist/build/worker.js', [07:36:28.577] '/vercel/path0/node_modules/next/dist/compiled/jest-worker/processChild.js' [07:36:28.577] ] [07:36:28.578] } [07:36:28.578] [07:36:28.578] > Build error occurred [07:36:28.582] Error: Failed to collect page data for /_sites/[site]/[slug] [07:36:28.582] at /vercel/path0/node_modules/next/dist/build/utils.js:955:15 { [07:36:28.582] type: 'Error' [07:36:28.582] } [07:36:28.645] Error: Command "npm run build" exited with 1`

any help with this?

When I build locally by next build and next start I can revalidate and it works, however, when I deploy this to vercel it won't revalidate anymore.

Weird is, that revalidation only works with /_sites/blog/{id} instead of /{id} even though the rewrite is set in middleware and the validation happens on blog.domain.com. I get "OK" on the /_site.. requests and failed to revalidate on everything else.

When I revalidate after deploying (using /_sites/...) I can disable the cache and refresh the page and for a split second I see the new version but than it changes back to the old one.

I use this for a fixed path blog so I changed the getStaticPaths/ Props:

pages/_sites/[site]/index

export const getStaticPaths = async () => {
  return { paths: [{ params: { site: "blog" }}], fallback: true }
};

export const getStaticProps = async ({
  params,
}) => {
  const data = (await prisma.post.findMany({
    where: {
      published: true,
    },
    orderBy: {
      createdAt: "desc",
    },
  }));

  if (!data) return { notFound: true, revalidate: 10 };

  return {
    props: {
      stringifiedData: JSON.stringify({
        [...]
      }),
    },
    revalidate: 3600,
  };
};

pages/_sites/[site]/[slug]

export const getStaticPaths = async () => {
  const posts = await prisma.post.findMany({
    select: {
      slug: true,
    },
  });

  const paths = posts.flatMap((post) => {
    return {
      params: {
        site: "blog",
        slug: post.slug,
      },
    };
  })

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


export const getStaticProps = async ({
  params,
}) => {
  if (!params) throw new Error("No path parameters found");

  const { slug } = params;

  const data = (await prisma.post.findFirst({
    where: {
      slug
    }
  }));

  if (!data) return { notFound: true, revalidate: 10 };

  const [mdxSource, adjacentPosts] = await Promise.all([
    getMdxSource(data.content),
    prisma.post.findMany({
      where: {
        published: true,
        NOT: {
          id: data.id,
        },
      },
      select: {
        slug: true,
        title: true,
        createdAt: true,
        description: true,
        image: true,
        imageBlurhash: true,
      },
    }),
  ]);

  return {
    props: {
      stringifiedData: JSON.stringify({
        ...data,
        mdxSource,
      }),
      stringifiedAdjacentPosts: JSON.stringify(adjacentPosts),
    },
    revalidate: 3600,
  };
};

And middleware

export const config = {
  matcher: [
    "/",
    "/([^/.]*)", // exclude `/public` files by matching all paths except for paths containing `.` (e.g. /logo.png)
    "/site/:path*",
    "/post/:path*",
    "/_sites/:path*",
  ],
};

export default function middleware(req) {
  // Clone the request url
  const url = req.nextUrl.clone();
  
  const { pathname } = req.nextUrl;
  
  const hostname = req.headers.get("host");
  if (!hostname)
    return new Response(null, {
      status: 400,
      statusText: "No hostname found in request headers",
    });


  const currentHost =
    process.env.NODE_ENV === "production" && process.env.VERCEL === "1"
      ? hostname
      .replace(`.domain.org`, "")
      .replace(`.###.vercel.app`, "")
      : hostname.replace(`.localhost:3000`, "");

  if(process.env.NODE_ENV !== "production") {
    if(pathname.startsWith(`/_templates`)) {
      url.pathname = pathname
      return NextResponse.rewrite(url);
    }
  }

  if (pathname.startsWith(`/_sites`) || pathname.startsWith(`/_templates`))
    return new Response(null, {
      status: 404,
    });


  if (!pathname.includes(".") && !pathname.startsWith("/api")) {
    if (currentHost === "app") {
      if (
        pathname === "/login" &&
        (req.cookies["next-auth.session-token"] ||
          req.cookies["__Secure-next-auth.session-token"])
      ) {
        url.pathname = "/";
        return NextResponse.redirect(url);
      }

      url.pathname = `/app${pathname}`;
      return NextResponse.rewrite(url);
    }

    if (
      hostname === "localhost:3000" ||
      hostname === "domain.org" ||
      hostname === "###.vercel.app"
    ) {
      url.pathname = `/home${url.pathname}`;
      return NextResponse.rewrite(url);
    }

    if(currentHost === "blog") {
      url.pathname = `/_sites/${currentHost}${url.pathname}`;
      return NextResponse.rewrite(url);
    }
    
    
    url.pathname = `/_templates/router`;
    return NextResponse.rewrite(url);
  }

Any idea?

I added some platforms code to my app and everything was working fine until recently and now my subdomains on my production domain don't work.

Here's what my component looks like in /pages/_sites/[site]/index.js

const Index = (props) => {
  const router = useRouter();

  if (router.isFallback) {
    return <h1>Loading...</h1>;
  }
  console.log("compoennt: ");
  console.log(typeof props.site);
  console.log({ props });

  if (!props.site) return <p>error...</p>;
  const site = JSON.parse(props.site);
  if (!site.site) return <p>error...</p>;
...

On my production site I get an empty props:

But on localhost I get the information I expect:

And in my Vercel build logs, I console.log my getStaticPaths and getStaticProps and I see all the data I expect:

But when I visit my website like subdomain.leavewithaweb.site I see an empty props object and my site doesn't work or have the data even though it's building?

It was working like a week ago then something happened and it stopped working.

My _middleware.js

export default function middleware(req) {
  // Clone the request url
  const url = req.nextUrl.clone();

  // Get pathname of request (e.g. /blog-slug)
  const { pathname } = req.nextUrl;

  // Get hostname of request (e.g. demo.vercel.pub)
  const hostname = req.headers.get("host");
  if (!hostname)
    return new Response(null, {
      status: 400,
      statusText: "No hostname found in request headers",
    });

  const currentHost =
    process.env.NODE_ENV === "production" && process.env.VERCEL === "1"
      ? // You have to replace ".vercel.pub" with your own domain if you deploy this example under your domain.
        // You can use wildcard subdomains on .vercel.app links that are associated with your Vercel team slug
        // in this case, our team slug is "platformize", thus *.platformize.vercel.app works
        hostname.replace(`.leavewithaweb.site`, "")
      : hostname.replace(`.localhost:3000`, "");

  if (pathname.startsWith(`/_sites`))
    return new Response(null, {
      status: 404,
    });

  if (!pathname.includes(".") && !pathname.startsWith("/api")) {
    if (hostname === "localhost:3000" || hostname === "leavewithaweb.site") {
      if (
        pathname === "/" &&
        (req.cookies["next-auth.session-token"] ||
          req.cookies["__Secure-next-auth.session-token"])
      ) {
        url.pathname = `/home`;
        return NextResponse.rewrite(url);
      } else if (pathname === "/") {
        url.pathname = `/home`;
        return NextResponse.rewrite(url);
      }
    } else {
      url.pathname = `/_sites/${currentHost}${pathname}`;
      return NextResponse.rewrite(url);
    }
  }
}

My getStaticPaths and getStaticProps

export async function getStaticPaths() {
  const subdomains = await fetch(
    `${process.env.NEXT_PUBLIC_SERVER_URL}zzz`,
    {
      method: "GET",
    }
  ).then((res) => res.json());

  console.log(subdomains);

  if (subdomains.subdomains.length === 0) {
    return {
      paths: [],
      fallback: true,
    };
  } else {
    return {
      paths: subdomains.subdomains.map((subdomain) => {
        return {
          params: { site: subdomain },
        };
      }),
      fallback: "blocking",
    };
  }
}

export async function getStaticProps({ params: { site } }) {
  const siteRes = await fetch(
    `${process.env.NEXT_PUBLIC_SERVER_URL}/zzz`,
    {
      method: "GET",
    }
  ).then((res) => res.json());

  console.log(siteRes);

  return {
    props: {
      site: JSON.stringify(siteRes),
    },
    revalidate: 10,
  };
}

I noticed a great feature On-demand ISR, but I'm not sure how to make it work for multiple subdomains. I read the source code of this repo, but the usage is:

res.unstable_revalidate(urlPath);

What if two sites have the same urlPath? For example alice.github.com/hello and bob.github.com/hello

• Fixes a type error with replaceLinks. When replacing native elements, like a, the prop types of your custom component have to match the underlying types
• removes gray-matter, which appears to be unused and next-mdx-remote also provides frontmatter parsing
• Removes an extra remark pass when serializing content, instead passes the remark plugins to the serialize() call

Please see this issue: https://github.com/vercel/next.js/issues/42795 (After 2 days of dealing with this, I really don't have the strength deal with this anymore.) In short, you platforms demo is utterly incompatible with the very presence of i18n in next.config.js. Once you add i18n config, the behaviour of middleware changes and the matcher is no longer valid. Index page (and only index page) starts ending on 404 and it's truly, truly pain in the ass to debug this. Especially since you expect the official example to be correct and compatible with such a basic as is internationalisation. Only when I even considered that it might be a F-up on your part I was able to solve this. I had to just throw the official matcher to the bin and handle exceptions to rewrite programatically within the middleware itself.

(Mention or warning in the official guide would also be nice...... :))))

Problem:

I got an error caused by the inputs in /site/[id]/settings directories. Some inputs are not editable. Some inputs are also misconfigured.

The following error is received when trying to edit. This screenshot below is taken from https://app.vercel.pub/site/[id]/settings

Solution

• Added ref attribute to some inputs in site settings
• Removed unused event parameter in onInput
• Removed unused data parameter in setData

Best regards, Ibrahim Uzun

Prisma referentialIntegrity was out of Preview. It was renamed to relationMode

• How to set the relation mode in your Prisma schema

PlanetScale used in the Kit does not support ForeignKeys with MySQL. Hence, it is required that we explicitly create Index on the relation and let Prisma manage.

• Using Prisma with PlanetScale
• How to emulate relations in Prisma Client

I noticed this while writing up https://github.com/vercel/platforms/issues/178, but was hoping that it'd be fixed in the final merge of https://github.com/vercel/platforms/pull/181

If you navigate to https://demo.vercel.pub/ then click the link for "Announcing our $150M Series D" (https://demo.vercel.pub/150m-series-d), then use your browser's back button, you will get a 404.

Here's a GIF screencast of the bug:

Getting the source code from the master branch I'm not able to install the dependencies.

Every time it's throwing npm ERESOLVE error:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"^13.0.4" from the root project
npm ERR!   peer next@"^12.2.5 || ^13" from [email protected]
npm ERR!   node_modules/next-auth
npm ERR!     next-auth@"^4.17.0" from the root project
npm ERR!     peer next-auth@"^4.0.1" from @next-auth/[email protected]
npm ERR!     node_modules/@next-auth/prisma-adapter
npm ERR!       @next-auth/prisma-adapter@"^1.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^11.1.0 || ^12.0.0" from [email protected]
npm ERR! node_modules/next-plausible
npm ERR!   next-plausible@"^3.1.4" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/next
npm ERR!   peer next@"^11.1.0 || ^12.0.0" from [email protected]
npm ERR!   node_modules/next-plausible
npm ERR!     next-plausible@"^3.1.4" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/user/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/user/.npm/_logs/2023-01-06T18_18_32_597Z-debug-0.log

I think it can be related to #159, but I'm not sure.

Help is appreciated Thanks!

I'm working on refactoring my multi-tenant/platform code to the new app directory and everything seems to be working fine except for client-side pushState navigation in production. Locally the client-side nav is happening via pushState, but once deployed to production, navigations result in full page loads.

Here's a test repo: https://github.com/nicksergeant/next-13-spa-push-state-platforms

The relevant middleware code (simplified): https://github.com/nicksergeant/next-13-spa-push-state-platforms/blob/abb3bde1213840a3f7d8d2a4ecbaf2d4c00d4e62/middleware.ts#L7-L18

When visiting a non-middleware-caught route, pushState navigation works fine between the routes: https://next-13-spa-push-state.vercel.app/sites/foo (use the nav group Nav links to a base path of /sites/foo:)

But when hosting on a custom domain mapping to /app/sites/foo via the middleware, the routes all still load fine but client-side pushNav is broken, so every route nav results in a full page load: https://foo.flxwebsites.com/ (use the nav group Nav links to a base path of /:)

I tried looking through https://github.com/vercel/platforms/pull/161 to see if I'm missing some configuration change but I don't see anything...

error info is reason: write EPROTO 139978634581952:error:1408F10B:SSL routines:ssl3_get_record:wrong version number.

Does anyone know why this is? cc @steven-tey

Some times the update will be successful, other times it will report this error

I tried login in from http://app.localhost:3000/login After login (with GitHub flow)

The page is again redirecting to http://app.localhost:3000/login

After I log in, If I visit http://app.localhost:3000/ manually in a new tab it is redirecting properly in the browser.

Do we need to update anything in middleware to handle this redirection?