So, Came across a website whose access was limited to a specific countries. You might have encountered such tasks where you must limit the access to a website based on the country. This got be thinking how can I achieve this in Next.js. So in this blog, I will show you how to limit the access to a website based on the country using next.js and vercel.
Prerequisites
Basic knowledge of TypeScript
Basic knowledge of Middleware
Basic knowledge of Next.js
Lets break down the task into smaller steps.
Create a new Next.js project
Setup the project
Create middleware to limit the access to a website based on the country
Create a new route to test the functionality
Deploy the project to Vercel
Test the functionality
Step 1: Create a new Next.js project
cd nextjs-country-wise-access
Step 2: Setup the project
To setup our projects we will setup pages which will be under this restriction and page/pages which will be open to all.
I will be typescript for this project. So let’s get started.
touch pages/international/index.ts
touch pages/index.ts
touch middleware.ts
Step 3: Create middleware to limit the access to a website based on the country
import { NextRequest } from ‘next/server‘
import { NextResponse } from ‘next/server‘
const env = process.env.NODE_ENV
export default async function middleware(req: NextRequest) {
const res = NextResponse.next()
const pathname = req.nextUrl.pathname
// Skip this middleware in development or if the path is international
if (env !== ‘development‘ && pathname !== ‘/international‘) {
const country = req.geo?.country || req.headers.get(‘x-vercel-ip-country‘)
// Here you can add the list of countries you want to allow, I have added IN and US for now
if (![‘IN‘, ‘US‘].includes(country ?? ”)) {
// Redirect to the international page if the country is not IN or US
return NextResponse.redirect(new URL(‘/international‘, req.url))
}
}
return res
}
Step 4: Create a new route to test the functionality
export default function InternationalPage() {
return (
<div>
<h1>International Page</h1>
<p>This page is open to all</p>
</div>
)
}
// pages/index.ts
export default function HomePage() {
return (
<div>
<h1>Home Page</h1>
<p>This page is open to IN and US only</p>
</div>
)
}
Step 5: Deploy the project to Vercel
You can deploy the project to vercel using their CLI or by connecting your github repository to vercel.
Step 6: Test the functionality
You can test the functionality by visiting the deployed website and changing the country in the request header. You can use VPN to change the country in the request header.
Conclusion
That’s it! You have successfully limited the access to a website based on the country using Next.js and Vercel.
