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 type {
NextRequest
} from "next/server";
import {
NextResponse
} from "next/server";
export const config = {
matcher: ["/engyne-sitemap.xml", "/((?!_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!
