docs: Add docs for How to Add Custom Middleware
#6
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
justlevine
changed the title
How to Add a Custom Middleware documentationHow to Add Custom Middleware
justlevine
reviewed
Jan 28, 2025
justlevine
changed the title
How to Add Custom Middleware How to Add Custom Middleware
ayushnirwal
reviewed
Jan 29, 2025
docs/middleware.md
Outdated
Comment on lines
13
to
34
| ```typescript | ||
| /** | ||
| * Middleware function for Next.js | ||
| * | ||
| * This middleware adds a custom header 'x-current-path' to the response, | ||
| * which contains the current pathname of the request. | ||
| * | ||
| * @param next - Next middleware | ||
| * @return The response object with modified headers | ||
| */ | ||
| export const currentPath: MiddlewareFactory = ( next: NextMiddleware ) => { | ||
| return async ( request: NextRequest, _next: NextFetchEvent ) => { | ||
| const response = await next( request, _next ); | ||
|
|
||
| if ( response ) { | ||
| response.headers.set( 'x-current-path', request.nextUrl.pathname ); | ||
| } | ||
|
|
||
| return response; | ||
| }; | ||
| }; | ||
| ``` |
There was a problem hiding this comment.
We have a src directory for keeping the code. The description is good enough.
There was a problem hiding this comment.
Updated in 6325e84
ayushnirwal
reviewed
Jan 29, 2025
docs/middleware.md
Outdated
Comment on lines
40
to
88
| ```typescript | ||
| /** | ||
| * Middleware function for Next.js | ||
| * | ||
| * This middleware adds custom proxies. | ||
| * | ||
| * @param next - Next middleware | ||
| * @return Custom redirection or NextMiddleware. | ||
| */ | ||
| export const proxies: MiddlewareFactory = ( next: NextMiddleware ) => { | ||
| return async ( request: NextRequest, _next: NextFetchEvent ) => { | ||
| const nextPath = request.nextUrl.pathname; | ||
|
|
||
| const { homeUrl, uploadsDirectory, restUrlPrefix } = getConfig(); | ||
|
|
||
| // Proxy for WordPress uploads. | ||
| const uploadsRegex = new RegExp( | ||
| // Adding trailing slash to uploadsDirectory path if not already present before searching. | ||
| `${ addTrailingSlash( uploadsDirectory ) }.*` | ||
| ); | ||
| if ( uploadsRegex.test( nextPath ) ) { | ||
| const match = uploadsRegex.exec( nextPath ); | ||
|
|
||
| if ( match && match[ 0 ] ) { | ||
| return NextResponse.redirect( new URL( match[ 0 ], homeUrl ) ); | ||
| } | ||
| } | ||
|
|
||
| // Proxy for WordPress APIs. | ||
| // If nextPath starts with restUrlPrefix, redirect to homeUrl/pathName. | ||
| if ( nextPath.startsWith( restUrlPrefix ) ) { | ||
| const APIRegex = new RegExp( `${ restUrlPrefix }.*` ); | ||
| const match = APIRegex.exec( request.nextUrl.toString() ); | ||
| if ( match && match[ 0 ] ) { | ||
| return NextResponse.redirect( new URL( match[ 0 ], homeUrl ) ); | ||
| } | ||
| } | ||
|
|
||
| // Proxy for Admin AJAX. | ||
| if ( '/wp-admin/admin-ajax.php' === nextPath ) { | ||
| return NextResponse.redirect( | ||
| new URL( '/wp-admin/admin-ajax.php', homeUrl ) | ||
| ); | ||
| } | ||
|
|
||
| return next( request, _next ); | ||
| }; | ||
| }; | ||
| ``` |
There was a problem hiding this comment.
Updated in 6325e84
ayushnirwal
reviewed
Jan 29, 2025
docs/middleware.md
Outdated
Comment on lines
90
to
96
| ## How to add custom middleware | ||
|
|
||
| To add custom middleware, please follow the instructions provided below: | ||
|
|
||
| 1. Create middleware of type `MiddlewareFactory`. | ||
| 2. Import middleware to `src/middleware.ts` file. | ||
| 3. In `src/middleware.ts` file, add imported middleware to `middleware` array. |
There was a problem hiding this comment.
IMO in any tutorial/how-to, you should never provide any information for the next step until the previous one is done. The steps in the section "## Sample Implementation of Middleware" are more suited to be here.
There was a problem hiding this comment.
Updated in 579f857
ayushnirwal
reviewed
Jan 29, 2025
docs/middleware.md
Outdated
Comment on lines
123
to
169
| ## Sample Implementation of Middleware | ||
|
|
||
| In this example we will be creating a homepage redirect whenever `/about` page is visited. | ||
|
|
||
| ### Step 1 | ||
|
|
||
| - Create a `src/redirectToHome.ts` middleware file containing the following middleware code: | ||
|
|
||
| ```typescript | ||
| import { MiddlewareFactory } from '@snapwp/next'; | ||
| import { type NextRequest, NextFetchEvent, NextMiddleware } from 'next/server'; | ||
|
|
||
| export const redirectToHome: MiddlewareFactory = ( | ||
| next: NextMiddleware | ||
| ): NextMiddleware => { | ||
| // Return NextMiddleware. | ||
| return ( request: NextRequest, _next: NextFetchEvent ) => { | ||
| // Redirect to home page whenever user visits about page. | ||
| if ( '/about' === request.nextUrl.pathname ) { | ||
| return NextResponse.redirect( new URL( '/', request.url ) ); | ||
| } | ||
|
|
||
| return next( request, _next ); // Call next middleware to conitnue execution. | ||
| }; | ||
| }; | ||
| ``` | ||
|
|
||
| ### Step 2 | ||
|
|
||
| - Import middleware created in `Step 1` file to `src/middleware.ts`. | ||
|
|
||
| ```typescript | ||
| import { redirectToHome } from './redirectToHome'; | ||
| ``` | ||
|
|
||
| ### Step 3 | ||
|
|
||
| - In `src/middleware.ts`, add the imported `redirectToHome` middleware in `middlewares` array. | ||
|
|
||
| ```typescript | ||
| const middlewares: MiddlewareFactory[] = [ redirectToHome ]; | ||
| ``` | ||
|
|
||
| ## Notes | ||
|
|
||
| - Multiple middleware can be loaded by adding them to `middleware` array in `src/middleware.ts` file. | ||
| - The execution priority of middleware will depend on the index they are added in `middleware` array. |
There was a problem hiding this comment.
This highlighted section is enough for "how to add a custom middleware"
There was a problem hiding this comment.
Updated in 579f857
|
Hi @ayushnirwal @justlevine, cc: @joelabreo227 |
For |
justlevine
approved these changes
Jan 29, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What
Related Issue(s):
Screenshots
Additional Info
Checklist