Engyne 101 — 2 min read

How to connect your Next.js site to Engyne blog

How to connect your Next.js site to Engyne blog

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 { 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!

Author Image

Sukhpal Saini

Sukh is the CTO & Co-founder of Engyne. He has previously worked as a Software Engineer building ML infrastructure for companies like IBM, Apple, and Saks Fifth Ave. He now consults numerous Bay Area startups on growth using SEO & Content Marketing.

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