fix: 🐛 sitemap, robot.txt, metadata

moinulmoin · Jan 6, 2024 · 71106d6 · 71106d6 · vercel · Jan 6, 2024
1 parent eaeddc4
commit 71106d6
Show file tree

Hide file tree

Showing 9 changed files with 158 additions and 129 deletions.
diff --git a/src/app/[locale]/layout.tsx b/src/app/[locale]/layout.tsx
@@ -1,81 +1,77 @@
-import Script from "next/script";
+import { type Metadata } from "next";
 import Footer from "~/components/layout/footer";
 import Header from "~/components/layout/header";
 import ThemeProvider from "~/components/shared/theme-provider";
 import { Toaster } from "~/components/ui/toaster";
-import { I18nProviderClient } from "~/locales/client";
-
-import { type Metadata } from "next";
-import { Inter } from "next/font/google";
-import localFont from "next/font/local";
 import { siteConfig } from "~/config/site";
+import { I18nProviderClient } from "~/locales/client";
 
-import { cn } from "~/lib/utils";
-import "../globals.css";
-
-const fontSans = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
-});
+type Props = {
+  params: { locale: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
 
-const fontHeading = localFont({
-  src: "../../assets/fonts/CalSans-SemiBold.woff2",
-  variable: "--font-heading",
-});
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const locale = params.locale || "en";
+  const site = siteConfig(locale);
 
-export const metadata: Metadata = {
-  title: {
-    default: siteConfig.name,
-    template: `%s - ${siteConfig.name}`,
-  },
-  description: siteConfig.description,
-  keywords: [
-    "Next.js",
-    "Shadcn/ui",
-    "LuciaAuth",
-    "Prisma",
-    "Vercel",
-    "Tailwind",
-    "Radix UI",
-  ],
-  authors: [
-    {
-      name: "moinulmoin",
-      url: "https://moinulmoin.com",
+  return {
+    title: {
+      default: site.name,
+      template: `%s - ${site.name}`,
     },
-  ],
-  creator: "moinulmoin",
-  openGraph: {
-    type: "website",
-    locale: "en_US",
-    url: siteConfig.url,
-    title: siteConfig.name,
-    description: siteConfig.description,
-    siteName: siteConfig.name,
-    images: [
+    description: site.description,
+    keywords: [
+      "Next.js",
+      "Shadcn/ui",
+      "LuciaAuth",
+      "Prisma",
+      "Vercel",
+      "Tailwind",
+      "Radix UI",
+      "Stripe",
+      "Internationalization",
+      "Postgres",
+    ],
+    authors: [
       {
-        url: siteConfig.ogImage,
-        width: 1200,
-        height: 630,
-        alt: siteConfig.name,
+        name: "moinulmoin",
+        url: "https://moinulmoin.com",
       },
     ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: siteConfig.name,
-    description: siteConfig.description,
-    images: [siteConfig.ogImage],
-    creator: "@immoinulmoin",
-  },
-  icons: {
-    icon: "/favicon.ico",
-    shortcut: "/favicon-16x16.png",
-    apple: "/apple-touch-icon.png",
-  },
-  manifest: `${siteConfig.url}/manifest.json`,
-  metadataBase: new URL(siteConfig.url),
-};
+    creator: "moinulmoin",
+    openGraph: {
+      type: "website",
+      locale: "en_US",
+      url: site.url,
+      title: site.name,
+      description: site.description,
+      siteName: site.name,
+      images: [
+        {
+          url: site.ogImage,
+          width: 1200,
+          height: 630,
+          alt: site.name,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: site.name,
+      description: site.description,
+      images: [site.ogImage],
+      creator: "@immoinulmoin",
+    },
+    icons: {
+      icon: "/favicon.ico",
+      shortcut: "/favicon-16x16.png",
+      apple: "/apple-touch-icon.png",
+    },
+    manifest: `${site.url}/manifest.json`,
+    metadataBase: new URL(site.url),
+  };
+}
 
 export const viewport = {
   width: 1,
@@ -95,32 +91,16 @@ export default function SubLayout({
   params: { locale: string };
 }) {
   return (
-    <html lang={locale}>
-      <body
-        className={cn(
-          "font-sans antialiased",
-          fontSans.variable,
-          fontHeading.variable
-        )}
-      >
-        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <Header />
-          <main>
-            {children}
-            {loginDialog}
-          </main>
-          <I18nProviderClient locale={locale}>
-            <Footer />
-          </I18nProviderClient>
-          <Toaster />
-        </ThemeProvider>
-      </body>
-      {process.env.NODE_ENV === "production" && (
-        <Script
-          src="https://umami.moinulmoin.com/script.js"
-          data-website-id="bc66d96a-fc75-4ecd-b0ef-fdd25de8113c"
-        />
-      )}
-    </html>
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <Header />
+      <main>
+        {children}
+        {loginDialog}
+      </main>
+      <I18nProviderClient locale={locale}>
+        <Footer />
+      </I18nProviderClient>
+      <Toaster />
+    </ThemeProvider>
   );
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,43 @@
+import { Inter } from "next/font/google";
+import localFont from "next/font/local";
+import { cookies } from "next/headers";
+import Script from "next/script";
+import { cn } from "~/lib/utils";
+import "./globals.css";
+
+const fontSans = Inter({
+  subsets: ["latin"],
+  variable: "--font-sans",
+});
+
+const fontHeading = localFont({
+  src: "../assets/fonts/CalSans-SemiBold.woff2",
+  variable: "--font-heading",
+});
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return children;
+  const locale = cookies().get("Next-Locale")?.value || "en";
+  return (
+    <html lang={locale}>
+      <body
+        className={cn(
+          "font-sans antialiased",
+          fontSans.variable,
+          fontHeading.variable
+        )}
+      >
+        {children}
+      </body>
+      {process.env.NODE_ENV === "production" && (
+        <Script
+          src="https://umami.moinulmoin.com/script.js"
+          data-website-id="bc66d96a-fc75-4ecd-b0ef-fdd25de8113c"
+        />
+      )}
+    </html>
+  );
 }
diff --git a/src/app/robots.ts b/src/app/robots.ts
@@ -1,5 +1,5 @@
 import { type MetadataRoute } from "next";
-import { siteConfig } from "~/config/site";
+import { siteUrl } from "~/config/site";
 
 export default function robots(): MetadataRoute.Robots {
   return {
@@ -8,6 +8,6 @@ export default function robots(): MetadataRoute.Robots {
       allow: "/",
       disallow: ["/api/", "/dashboard"],
     },
-    sitemap: `${siteConfig.url}/sitemap.xml`,
+    sitemap: [`${siteUrl}/sitemap.xml`],
   };
 }
diff --git a/src/app/sitemap.ts b/src/app/sitemap.ts
@@ -1,25 +1,35 @@
 import { type MetadataRoute } from "next";
 import { siteConfig } from "~/config/site";
 
+const locales = ["en", "fr"];
+
 export default function sitemap(): MetadataRoute.Sitemap {
-  return [
-    {
-      url: siteConfig.url,
-      lastModified: new Date(),
-      changeFrequency: "weekly",
-      priority: 1,
-    },
-    {
-      url: `${siteConfig.url}/about`,
-      lastModified: new Date(),
-      changeFrequency: "weekly",
-      priority: 0.5,
-    },
-    {
-      url: `${siteConfig.url}/changelog`,
-      lastModified: new Date(),
-      changeFrequency: "weekly",
-      priority: 0.5,
-    },
-  ];
+  return locales
+    .map((locale) => [
+      {
+        url: siteConfig(locale).url,
+        lastModified: new Date(),
+        changeFrequency: "weekly",
+        priority: 1,
+      },
+      {
+        url: `${siteConfig(locale).url}/login`,
+        lastModified: new Date(),
+        changeFrequency: "weekly",
+        priority: 0.5,
+      },
+      {
+        url: `${siteConfig(locale).url}/about`,
+        lastModified: new Date(),
+        changeFrequency: "weekly",
+        priority: 0.5,
+      },
+      {
+        url: `${siteConfig(locale).url}/changelog`,
+        lastModified: new Date(),
+        changeFrequency: "weekly",
+        priority: 0.5,
+      },
+    ])
+    .flat() as MetadataRoute.Sitemap;
 }
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
@@ -20,7 +20,7 @@ export default function Footer() {
           <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
             Developed by{" "}
             <Link
-              href={siteConfig.links.twitter}
+              href={siteConfig().links.twitter}
               target="_blank"
               rel="noreferrer"
               className="font-medium underline underline-offset-4"

diff --git a/src/components/sections/open-source.tsx b/src/components/sections/open-source.tsx
@@ -15,7 +15,7 @@ export default function OpenSource() {
           </p>
           <Link
             className="underline underline-offset-4"
-            href={siteConfig.links.github}
+            href={siteConfig().links.github}
             target="_blank"
             rel="noreferrer"
           >

diff --git a/src/config/site.ts b/src/config/site.ts
@@ -1,15 +1,15 @@
-const siteUrl =
+export const siteUrl =
   process.env.NEXT_PUBLIC_APP_URL || "https://chadnext.moinulmoin.com";
 
-export const siteConfig = {
+export const siteConfig = (locale?: string) => ({
   name: "ChadNext",
-  url: siteUrl,
-  ogImage: `${siteUrl}/opengraph-image`,
-  description: "Quick Starter Template for your Next.js project.",
+  url: siteUrl + "/" + locale,
+  ogImage: `${siteUrl}/${locale}/opengraph-image`,
+  description: "Quick Starter Template for your Next project.",
   links: {
     twitter: "https://twitter.com/immoinulmoin",
     github: "https://github.com/moinulmoin/chadnext",
   },
-};
+});
 
 export type SiteConfig = typeof siteConfig;
diff --git a/src/locales/server.ts b/src/locales/server.ts
@@ -1,6 +1,7 @@
 import { createI18nServer } from "next-international/server";
 
-export const { getI18n, getScopedI18n, getStaticParams } = createI18nServer({
-  en: () => import("./en"),
-  fr: () => import("./fr"),
-});
+export const { getI18n, getScopedI18n, getStaticParams, getCurrentLocale } =
+  createI18nServer({
+    en: () => import("./en"),
+    fr: () => import("./fr"),
+  });
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -11,5 +11,7 @@ export function middleware(request: NextRequest) {
 }
 
 export const config = {
-  matcher: ["/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)"],
+  matcher: [
+    "/((?!api|static|.*\\..*|_next|favicon.ico|sitemap.xml|robots.txt).*)",
+  ],
 };