Mateusz Janota z4nr34l

RFC: Next.js Dynamic Middleware

Summary

This RFC proposes a new approach to implementing middleware in Next.js, moving away from a single middleware.ts file to a more dynamic, route-specific implementation similar to the current handling of dynamic segments, pages, and layouts.

Motivation

The current middleware implementation in Next.js, while powerful, lacks the flexibility and modularity offered by other Next.js features like dynamic routing. This proposal aims to bring middleware in line with these other features, allowing for more granular control and easier management of middleware across a complex application.

As there is no officially supported integration that really works I've prepared a simple CI/CD pipelines to cover vercel's preview and production environments.

Instruction

1. Create 3 Tinybird workspaces:

<name>_dev,
<name>_stage,
<name>

	import { cn } from "@workspace/ui/lib/utils";
	import type { ReactNode } from "react";

	type GridConfig = {
	cols: number;
	rows: number;
	};

	type GridLayoutProps = {
	mobile: GridConfig;

	name: Update Dependencies

	on:
	schedule:
	# Runs every 8 hours (at 00:00, 08:00, and 16:00 UTC)
	- cron: "0 /8 * *"
	workflow_dispatch: # Allows manual trigger

	permissions:
	contents: write

	import { cn } from "@/lib/utils";

	interface ResponsiveProps {
	children: React.ReactNode;
	className?: string;
	}

	interface BreakpointProps extends ResponsiveProps {
	show?: "sm" \| "md" \| "lg" \| "xl" \| "2xl";
	hide?: "sm" \| "md" \| "lg" \| "xl" \| "2xl";

	/**
	* Smart sorting utility that detects data types and applies appropriate sorting methods
	* - Strings are compared case-insensitively
	* - Dates are compared as Date objects
	* - Numbers are compared numerically
	* - Booleans are compared as booleans (false first, true second)
	*/

	/**
	* Detects the data type of a value

	#!/bin/bash

	# Project settings
	PROJECT_DIR="/opt/projects" # CHANGE PATH

	# Function to log messages with date and time
	log_message() {
	echo "[$(date +"%Y-%m-%d %H:%M:%S")] $1"
	}

	import { createMiddleware } from '@rescale/nemo';
	import { internalMiddleware } from '@/app/(platform)/(personal)/_middleware';

	const middlewares = {
	'/(home\|settings){/:path}?': internalMiddleware,
	};

	export const middleware = createMiddleware(
	middlewares as never,
	);

	#!/bin/bash

	# Project settings
	PROJECT_DIR="<PROJECT DIR>"

	# Function to log messages with date and time
	log_message() {
	echo "[$(date +"%Y-%m-%d %H:%M:%S")] $1"
	}

	import type { NextRequest, NextResponse } from 'next/server';
	import { CronJob, type ErrorResponse } from '@rescale/cron';

	// [...]

	interface CombinedResponse {
	updateSubscriptions: UpdateSubscriptionResponse[];
	sendNewsletter: SendNewsletterResponse[];
	}