Connecting your Next.js site to your Engyne blog is super easy.
Let's get started!
Step 1: Create a Next.js Middleware file
Next.js has a magical feature called Middleware Routing that can intercept incoming requests and point them elsewhere. In our case, we want to send every request coming to /blog to the Engyne subdomain.
Create a new empty root file called middleware.ts
Step 2: Rewrite to Engyne blog
Copy/Paste this code in there. Be sure to update the engyneSubdomain variable to your subdomain.
import { NextResponse } from "next/server";
import type { NextRequest } from "next/server";
export const config = {
matcher: [
"/((?!_next|api|[\\w-]+\\.\\w+).*)",
],
};
export default async function middleware(req: NextRequest) {
const engyneSubdomain = "mystartup-indigo" // change this to your Engyne subdomain
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",
});
if (pathname === "/engyne-sitemap.xml") {
return NextResponse.rewrite(
new URL(pathname, `https://${engyneSubdomain}.engyne.page`)
);
}
if (pathname.startsWith("/blog") || pathname.startsWith("/tags")) {
return NextResponse.rewrite(
new URL(pathname, `https://${engyneSubdomain}.engyne.page`)
);
}
if (pathname.startsWith("/_engyne")) {
return NextResponse.rewrite(
new URL(pathname, `https://${engyneSubdomain}.engyne.page`)
);
}
return NextResponse.next();
}Step 3: Deploy to Production
Once you deploy to Production, every time you visit /blog, you will now see the Engyne blog!
