How to implement SEO-friendly 301 redirects for old Shopify URLs in a PERN stack app (Next.js + Express + Prisma + PostgreSQL)

by

Summary

Implementing SEO-friendly 301 redirects for old Shopify URLs in a PERN stack app requires a thorough understanding of the division of responsibilities between the backend and frontend. The goal is to redirect old URLs to new ones while preserving search engine optimization (SEO). This involves setting up permanent redirects using Express and Prisma, and ensuring that the frontend (Next.js) handles the redirects correctly.

Root Cause

The root cause of the issue is the need to migrate from Shopify to a custom PERN stack application while preserving SEO. The main challenges are:

  • Implementing 301 redirects for old product and category URLs
  • Ensuring SEO-friendly behavior for Google and bookmarks
  • Understanding the division of responsibilities between the backend (Express + Prisma) and frontend (Next.js)

Why This Happens in Real Systems

This issue occurs in real systems when:

  • E-commerce stores migrate from one platform to another (e.g., Shopify to custom PERN stack)
  • URL structures change, requiring redirects to preserve SEO
  • Search engines and bookmarks need to be updated to reflect the new URLs

Real-World Impact

The real-world impact of not implementing SEO-friendly 301 redirects includes:

  • Loss of search engine rankings
  • Broken bookmarks and user frustration
  • Decreased website traffic and revenue

Example or Code

// Express middleware to handle 301 redirects
const express = require('express');
const { PrismaClient } = require('@prisma/client');
const prisma = new PrismaClient();

const app = express();

app.use(async (req, res, next) => {
  const oldPath = req.path;
  const product = await prisma.product.findFirst({
    where: { oldPath },
  });
  if (product && product.newPath) {
    res.redirect(301, product.newPath);
  } else {
    next();
  }
});

How Senior Engineers Fix It

Senior engineers fix this issue by:

  • Implementing 301 redirects using Express and Prisma
  • Ensuring SEO-friendly behavior for Google and bookmarks
  • Understanding the division of responsibilities between the backend (Express + Prisma) and frontend (Next.js)
  • Using Prisma queries to efficiently look up old paths and generate new URLs

Why Juniors Miss It

Juniors may miss this issue due to:

  • Lack of understanding of SEO principles and 301 redirects
  • Insufficient knowledge of Express and Prisma
  • Failure to consider the division of responsibilities between the backend and frontend
  • Inadequate testing and debugging of the redirect implementation