Skip to main content
Before launching an app with this boilerplate, please make sure to replace all the boilerplate data such as title, description, etc. with the actual data! 
export const seoConfig: SEOConfig = {
    default: {
        title: "Lightweight SaaS Boilerplate • 2mrw",
        template: "%s • 2mrw", // used for page-specific titles: "Sign In • 2mrw"
        description:
            "Launch your SaaS faster with our Next.js and Supabase boilerplate.",
        keywords: ["SaaS boilerplate", "Next.js template", "Supabase starter"],
        url: process.env.NEXT_PUBLIC_SITE_URL ?? "https://2mrw.dev",
        locale: "en-US",

        // open graph image (used by Facebook, LinkedIn, etc.)
        ogImage: {
            url: "/og-image.jpg",
            width: 1200,
            height: 630,
            alt: "2mrw SaaS Boilerplate",
        },

        // twitter config (used by Twitter)
        twitter: {
            handle: "@timohuennebeck",
            site: "@2mrw",
            cardType: CardType.SUMMARY_LARGE_IMAGE,
        },
    },
...
};
To-Do’s:
  • Update the seoConfig with the actual data for your app such as the title, description, keywords, etc.

​
Generating SEO For Specific Pages

You can also generate SEO for specific pages. This is useful if you want to have a different title, description, etc. for a specific page. 
const seo = generateSeo(seoConfig, {
    title: "Sign In",
    description: "You can sign in to your account using email or google.",
    keywords: ["Sign in", "Email", "Google"],
    url: "/auth/sign-in",
});
This will generate the following SEO object behind the scenes: 
{
    title: "Sign In • 2mrw",
    description: "You can sign in to your account using email or google.",
    keywords: ["Sign in", "Email", "Google"],
    url: "https://2mrw.dev/auth/sign-in",
}
⌘I