Organizing middleware files
Unanswered
Large oak-apple gall posted this in #help-forum
Large oak-apple gallOP
Next.js docs say:
"Note: While only one middleware.ts file is supported per project, you can still organize your middleware logic modularly. Break out middleware functionalities into separate .ts or .js files and import them into your main middleware.ts file. This allows for cleaner management of route-specific middleware, aggregated in the middleware.ts for centralized control. By enforcing a single middleware file, it simplifies configuration, prevents potential conflicts, and optimizes performance by avoiding multiple middleware layers."
But how would that look in practice? Take a look at my code snippet, and please let me know if my approach to this convention is right.
What I want to do is simply a
"Note: While only one middleware.ts file is supported per project, you can still organize your middleware logic modularly. Break out middleware functionalities into separate .ts or .js files and import them into your main middleware.ts file. This allows for cleaner management of route-specific middleware, aggregated in the middleware.ts for centralized control. By enforcing a single middleware file, it simplifies configuration, prevents potential conflicts, and optimizes performance by avoiding multiple middleware layers."
But how would that look in practice? Take a look at my code snippet, and please let me know if my approach to this convention is right.
/src/middleware.tsimport type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';
import { eventGallery } from '@/app/gallery/middleware';
import { PATHNAMES } from '@/constants';
export const middleware = async (request: NextRequest) => {
const eventGalleryResponse = await eventGallery(request);
if (eventGalleryResponse) return eventGalleryResponse;
return NextResponse.next();
};
export const config = {
matcher: PATHNAMES.eventGallery,
};/src/app/gallery/middleware.tsimport type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';
import { getEntry } from '@/api/queries';
import { entriesIds, PATHNAMES } from '@/constants';
import type { UrlType } from '@/types/content';
export const eventGallery = async (request: NextRequest) => {
const isGallery = request.nextUrl.pathname === PATHNAMES.eventGallery;
if (!isGallery) return;
const {
fields: { url },
} = await getEntry<UrlType>(entriesIds.eventGallery);
if (url?.length) return NextResponse.redirect(url);
};What I want to do is simply a
/gallery route that will redirect users to a url specified in CMS.6 Replies
@Large oak-apple gall Next.js docs say:
*"Note: While only one middleware.ts file is supported per project, you can still organize your middleware logic modularly. Break out middleware functionalities into separate .ts or .js files and import them into your main middleware.ts file. This allows for cleaner management of route-specific middleware, aggregated in the middleware.ts for centralized control. By enforcing a single middleware file, it simplifies configuration, prevents potential conflicts, and optimizes performance by avoiding multiple middleware layers."*
But how would that look in practice? Take a look at my code snippet, and please let me know if my approach to this convention is right.
`/src/middleware.ts`
typescript
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';
import { eventGallery } from '@/app/gallery/middleware';
import { PATHNAMES } from '@/constants';
export const middleware = async (request: NextRequest) => {
const eventGalleryResponse = await eventGallery(request);
if (eventGalleryResponse) return eventGalleryResponse;
return NextResponse.next();
};
export const config = {
matcher: PATHNAMES.eventGallery,
};
`/src/app/gallery/middleware.ts`
typescript
import type { NextRequest } from 'next/server';
import { NextResponse } from 'next/server';
import { getEntry } from '@/api/queries';
import { entriesIds, PATHNAMES } from '@/constants';
import type { UrlType } from '@/types/content';
export const eventGallery = async (request: NextRequest) => {
const isGallery = request.nextUrl.pathname === PATHNAMES.eventGallery;
if (!isGallery) return;
const {
fields: { url },
} = await getEntry<UrlType>(entriesIds.eventGallery);
if (url?.length) return NextResponse.redirect(url);
};
What I want to do is simply a `/gallery` route that will redirect users to a url specified in CMS.
i wouldn't stress over the exact organisation pattern too much, it just produces boilerplate code and doesn't help much with anything.
what the documentation says is essentially: abstract logic into modular functions declared in different files and import them to the middleware to make the middleware declarative rather than imperative.
that only really applies for complex middleware that is hard to maintain without declarative code btw. for your case it should be simple enough to just put the whole thing inside the middleware file itself.
an example of the pattern mentioned in the documentation can be something like [this](https://github.com/hoangvvo/next-connect?tab=readme-ov-file#nextjs-middleware) or [this](https://next-intl.dev/docs/routing/middleware#composing-other-middlewares).
what the documentation says is essentially: abstract logic into modular functions declared in different files and import them to the middleware to make the middleware declarative rather than imperative.
that only really applies for complex middleware that is hard to maintain without declarative code btw. for your case it should be simple enough to just put the whole thing inside the middleware file itself.
an example of the pattern mentioned in the documentation can be something like [this](https://github.com/hoangvvo/next-connect?tab=readme-ov-file#nextjs-middleware) or [this](https://next-intl.dev/docs/routing/middleware#composing-other-middlewares).
Large oak-apple gallOP
Thank you. Turns out my solution won't work anyway as I try to fetch the url to redirect to on edge, where axios used underhood by contentful library is not available to use.
Not sure what to do now. I really want to have this URL manageable via the CMS
I will probably give up on middlewares and use next's redirect function 😦
yeah making a page and use
redirect there is a good idea too