This content originally appeared on DEV Community and was authored by u/Horror_Amphibian7516
When working with the new Next.js App Router, I noticed most existing SEO libraries (like next-seo
) were designed for the old Pages Router. They still work, but often feel like workarounds instead of being fully aligned with generateMetadata
and static rendering.
That’s why I built amphibian-seo — a modern, App Router-first SEO toolkit that integrates seamlessly into the new Next.js architecture.
Why use Amphibian SEO instead of other libraries?
-
Built for App Router – Native support for
generateMetadata
, no wrappers or hacks. - Full SEO coverage – Titles, descriptions, OpenGraph, Twitter Cards, robots directives, canonical URLs, JSON-LD, preload assets, and more.
- TypeScript-first – Complete typings for all metadata options, helping you avoid mistakes.
-
Dynamic templates – Title patterns like
%title% | %siteName%
for consistent branding. - Security & performance – Add security meta tags and preload critical assets with ease.
- SSR and static ready – Designed to work with Next.js’s static and server rendering out of the box.
If you’re moving to or already using the App Router, this package is a better fit than older SEO libraries that were never designed for it.
Quick Example
// app/layout.tsx
import { Metadata } from 'amphibian-seo';
export function generateMetadata() {
return Metadata({
title: {
default: 'My Site',
template: '%title% | My Site',
},
description: 'A modern SEO setup for Next.js App Router',
canonicalUrl: 'https://mysite.com',
openGraph: {
title: 'My Site',
type: 'website',
url: 'https://mysite.com',
images: [
{ url: 'https://mysite.com/og.png', width: 1200, height: 630 },
],
},
twitter: {
card: 'summary_large_image',
site: '@mysite',
},
});
}
npm: amphibian-seo
If you’re already using the App Router, give it a try and let me know your thoughts — contributions and feedback are more than welcome.
This content originally appeared on DEV Community and was authored by u/Horror_Amphibian7516