e1:"ExplicitChatIdProvider" e2:I[903690,["$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$64","$65","$66","$67","$68"],"$e1"] e3:I[838238,["$33","$34","$35","$36","$37","$38","$39","$3a","$3b","$3c","$3d","$3e","$3f","$40","$41","$42","$43","$44","$45","$46","$47","$48","$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$64","$65","$66","$67","$68"],"SWRDataProvider"] e4:T3f4a,[V0_FILE]typescriptreact:file="components/age-gate.tsx" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" interface AgeGateProps { children: React.ReactNode minimumAge?: number } export function AgeGate({ children, minimumAge = 21 }: AgeGateProps) { const [isVerified, setIsVerified] = useState(false) const [isBot, setIsBot] = useState(false) useEffect(() => { // Check if this is a bot using user agent detection const userAgent = navigator.userAgent.toLowerCase() const botPatterns = [ "googlebot", "bingbot", "slurp", "duckduckbot", "baiduspider", "yandexbot", "facebookexternalhit", "twitterbot", "rogerbot", "linkedinbot", "embedly", "quora link preview", "showyoubot", "outbrain", "pinterest/0.", "developers.google.com/+/web/snippet", "slackbot", "vkshare", "w3c_validator", "redditbot", "applebot", "whatsapp", "flipboard", "tumblr", "bitlybot", "skypeuripreview", "nuzzel", "discordbot", "google page speed", "qwantify", ] const isBotDetected = botPatterns.some((pattern) => userAgent.includes(pattern)) setIsBot(isBotDetected) // Check if user has already verified their age in this session const ageVerified = sessionStorage.getItem("ageVerified") if (ageVerified === "true" || isBotDetected) { setIsVerified(true) } }, []) const handleAgeVerification = (isOfAge: boolean) => { if (isOfAge) { setIsVerified(true) sessionStorage.setItem("ageVerified", "true") } else { // Redirect to a different page or show an error window.location.href = "https://www.google.com" } } // If it's a bot or user is verified, show the content if (isBot || isVerified) { return <>{children} } // Show age gate for real users return (

Age Verification You must be {minimumAge} or older to access this content.

Please confirm that you are of legal age to continue.

By clicking "I am {minimumAge}+", you confirm that you meet the age requirement.

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/age-gate/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescript:file="middleware.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { NextResponse, userAgent } from "next/server" import type { NextRequest } from "next/server" function isBot(request: NextRequest): boolean { const userAgentData = userAgent(request) return userAgentData.isBot } export function middleware(request: NextRequest) { // Skip age gate for bots using User-Agent detection if (isBot(request)) { return NextResponse.next() } // Check if user has already verified their age const ageVerified = request.cookies.get("ageVerified")?.value === "true" if (ageVerified) { return NextResponse.next() } // If not verified and not a bot, redirect to age gate if (request.nextUrl.pathname !== "/age-gate") { const url = request.nextUrl.clone() url.pathname = "/age-gate" url.searchParams.set("redirect", request.nextUrl.pathname) return NextResponse.redirect(url) } return NextResponse.next() } export const config = { matcher: [ /* * Match all request paths except for the ones starting with: * - api (API routes) * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * - age-gate (the age gate page itself) */ "/((?!api|_next/static|_next/image|favicon.ico|age-gate).*)", ], } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" export default function Home() { const handleReset = () => { document.cookie = "ageVerified=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT" window.location.reload() } return (

Welcome to Our Site

This content is age-restricted and only visible to users who have verified their age. Search engines and bots can access this content without the age gate using Next.js middleware.

Protected Content

This is the main content that requires age verification for human users but is accessible to search engine crawlers for SEO purposes.

SEO Friendly

Search engines can index this content normally while still maintaining age restrictions for actual visitors using Next.js built-in bot detection.

) } [V0_FILE]typescriptreact:file="app/age-gate/page.tsx" isEdit="true" "use client" import { useState } from "react" import { useRouter, useSearchParams } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function AgeGatePage() { const [isLoading, setIsLoading] = useState(false) const [copied, setCopied] = useState(false) const router = useRouter() const searchParams = useSearchParams() const redirectPath = searchParams.get("redirect") || "/" const minimumAge = 21 const handleAgeVerification = async (isOfAge: boolean) => { setIsLoading(true) if (isOfAge) { // Set cookie to remember age verification document.cookie = `ageVerified=true; path=/; max-age=${60 * 60 * 24 * 30}` // 30 days router.push(redirectPath) } else { // Redirect away from the site window.location.href = "https://www.google.com" } } const copyToClipboard = async () => { const curlCommand = "curl -s -H 'User-Agent: Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)' https://v0-next-js-age-gate.vercel.sh/ | grep -q 'This content is age-restricted' && echo 'It works!'" try { await navigator.clipboard.writeText(curlCommand) setCopied(true) setTimeout(() => setCopied(false), 2000) } catch (err) { console.error("Failed to copy:", err) } } return (

Age Verification You must be {minimumAge} or older to access this content.

Please confirm that you are of legal age to continue.

By clicking "I am {minimumAge}+", you confirm that you meet the age requirement.

▶ How This Works

When you visit this site,{" "} Next.js Middleware {" "} runs first to examine your request. It uses the built-in{" "} userAgent().isBot {" "} function to detect if you're a search engine crawler like Google or Bing. If you're a bot, you're immediately allowed through to index the content for SEO. If you're a human, you're redirected here to verify your age first. Once verified, a cookie remembers your status so you won't see this page again for 30 days.

Test Bot Detection:

You can verify this works by simulating a search engine bot with curl:


                    curl -s -H 'User-Agent: Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)'
                    https://v0-next-js-age-gate.vercel.sh/ | grep -q 'This content is age-restricted' && echo 'It
                    works!'

If you see "It works!" then bots are successfully bypassing the age gate and accessing the main content directly, while humans still see this verification page.

Note: This solution doesn't verify the{" "} authenticity of the bot , but it should generally be sufficient for this type of age gate implementation.

) }db:["$","$Le2",null,{"chatId":"rpu9RZUKjaK","children":["$","$Le3",null,{"data":{"@\"active-block\",\"rpu9RZUKjaK\",":{"id":"b_pw3pJTcqI7W","messageId":"E70h11q3sSQTbxP3q9zvMLczGTOt2Ntx","source":"$e4","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"age-gate-app","type":"code-project","project":"age-gate-app","taskNameActive":"Adding copy button","taskNameComplete":"Added copy button"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"rpu9RZUKjaK\",":false},"children":"$Le5"}]}]

About

Tags

Share

About

Tags

Share

More from rauchg

More Templates Like This

More from rauchg

More Templates Like This