2 min read — Published 26 days ago

How to connect your Next.js site to Engyne blog

How to connect your Next.js site to Engyne blog

Engyne 101
Featured Image

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!


Share this post

Sign up for our newsletter

Be the first one to know when we publish next

Don't worry, we'll never share your email with anyone else


© 2024 Engyne

Made with Engyne