Redirecting to a holding page during development - middleware? #44954

MattHeslington · 2023-01-17T10:08:53Z

MattHeslington
Jan 17, 2023

Hello,

I'm currently developing a large site with NextJS, and have the site deployed on Vercel. I would like to move the over to our 'real' domain name instead of the Vercel domain, but before I do that I wonder if it's possible to automatically show a holding page when the live site is viewed while the site is in development? I've looked into it and it seems this is something I should be using middleware for - is this correct or indeed possible? Ideally I would like to redirect to, let's say, /coming-soon if the .env variable is dev or something, but still grant access to certain ip addresses.
I'm still on Next 12.2.3 but would be happy to upgrade if necessary.
Many thanks for any help.

Answered by MattHeslington

Jan 18, 2023

Ok I figured it out by reading the Middleware API docs 😁

const ipAddress = request.ip
    if (ipAddress !== 'IP-ADDRESS') {
        if (request.nextUrl.pathname === '/') {
            return NextResponse.redirect(new URL('/coming-soon', request.url))
        }
    }
    return NextResponse.next()

View full answer

MattHeslington · 2023-01-17T11:46:33Z

MattHeslington
Jan 17, 2023
Author

Ah, I should have checked the examples folder first. I've got a basic version working now with the following code:

import { NextResponse } from 'next/server'

export function middleware(request) {
    if (request.nextUrl.pathname === '/') {
        return NextResponse.redirect(new URL('/coming-soon', request.url))
    }
    return NextResponse.next()
}

export const config = {
    matcher: ['/:path*'],
}

What I would really like to do is enable just myself to view the site without the redirect, while everyone else gets directed to the coming-soon page. I'm trying to do it like this, whereby if the ip address in the headers is not my public ip address, do the redirect, else just show the normal page:

import { NextResponse } from 'next/server'

export function middleware(request) {
    if (request.headers['x-forwarded-for'] !== 'MY-PUBLIC-IP-ADDRESS') {
        if (request.nextUrl.pathname === '/') {
            return NextResponse.redirect(new URL('/coming-soon', request.url))
        }
    }
    return NextResponse.next()
}

export const config = {
    matcher: ['/:path*'],
}

However, it's still redirects me to the coming-soon page. Does anyone have any ideas?
Cheers, Matt

0 replies

MattHeslington · 2023-01-18T05:19:45Z

MattHeslington
Jan 18, 2023
Author

Ok I figured it out by reading the Middleware API docs 😁

const ipAddress = request.ip
    if (ipAddress !== 'IP-ADDRESS') {
        if (request.nextUrl.pathname === '/') {
            return NextResponse.redirect(new URL('/coming-soon', request.url))
        }
    }
    return NextResponse.next()

0 replies

Redirecting to a holding page during development - middleware? #44954

MattHeslington Jan 17, 2023

Replies: 2 suggested answers

MattHeslington Jan 17, 2023 Author

MattHeslington Jan 18, 2023 Author

Insert Link

MattHeslington
Jan 17, 2023

MattHeslington
Jan 17, 2023
Author

MattHeslington
Jan 18, 2023
Author