Implemented static and dynamic metadata generation within (root) route group

Author: ladunjexa

app/(root)/(home)/page.tsx

@@ -15,6 +15,11 @@ import { getQuestions } from "@/lib/actions/question.action";
 import { HomePageFilters } from "@/constants/filters";
 
 import type { SearchParamsProps } from "@/types";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Home — DevOverflow",
+};
 
 export default async function Home({ searchParams }: SearchParamsProps) {
   const { userId: clerkId } = auth();

app/(root)/ask-question/page.tsx

@@ -3,6 +3,11 @@ import { auth } from "@clerk/nextjs";
 import Question from "@/components/forms/Question";
 
 import { getUserById } from "@/lib/actions/user.action";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Ask a Question — DevOverflow",
+};
 
 type Props = {};
 

app/(root)/collection/page.tsx

@@ -11,6 +11,11 @@ import { getSavedQuestions } from "@/lib/actions/user.action";
 import { QuestionFilters } from "@/constants/filters";
 
 import type { SearchParamsProps } from "@/types";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Collection — DevOverflow",
+};
 
 export default async function Collection({ searchParams }: SearchParamsProps) {
   const { userId: clerkId } = auth();

app/(root)/community/page.tsx

@@ -9,6 +9,11 @@ import { getAllUsers } from "@/lib/actions/user.action";
 import { UserFilters } from "@/constants/filters";
 
 import type { SearchParamsProps } from "@/types";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Community — DevOverflow",
+};
 
 const Page = async ({ searchParams }: SearchParamsProps) => {
   const result = await getAllUsers({

app/(root)/edit-answer/[id]/page.tsx

@@ -7,6 +7,11 @@ import Answer from "@/components/forms/Answer";
 import { getAnswerById } from "@/lib/actions/answer.action";
 
 import type { ParamsProps } from "@/types";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Edit Answer — DevOverflow",
+};
 
 const Page = async ({ params }: ParamsProps) => {
   const { userId } = auth();

app/(root)/profile/[id]/page.tsx

@@ -10,10 +10,21 @@ import Stats from "@/components/shared/Stats";
 import AnswersTab from "@/components/shared/AnswersTab";
 import QuestionsTab from "@/components/shared/QuestionsTab";
 
-import { getUserInfo } from "@/lib/actions/user.action";
+import { getUserInfo, getUserById } from "@/lib/actions/user.action";
 import { getFormattedJoinedDate } from "@/lib/utils";
 
 import type { URLProps } from "@/types";
+import type { Metadata } from "next";
+
+export async function generateMetadata({
+  params,
+}: Omit<URLProps, "searchParams">): Promise<Metadata> {
+  const user = await getUserById({ userId: params.id });
+
+  return {
+    title: `${user.username}'s Profile — DevOverflow`,
+  };
+}
 
 const Page = async ({ params, searchParams }: URLProps) => {
   const { userId: clerkId } = auth();

app/(root)/profile/edit/page.tsx

@@ -5,6 +5,11 @@ import Profile from "@/components/forms/Profile";
 import { getUserById } from "@/lib/actions/user.action";
 
 import type { ParamsProps } from "@/types";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Edit Profile — DevOverflow",
+};
 
 const Page = async ({ params }: ParamsProps) => {
   const { userId } = auth();

app/(root)/question/[id]/page.tsx

@@ -18,6 +18,17 @@ import { getQuestionById } from "@/lib/actions/question.action";
 import { getFormattedNumber, getTimestamp } from "@/lib/utils";
 
 import type { URLProps } from "@/types";
+import type { Metadata } from "next";
+
+export async function generateMetadata({
+  params,
+}: Omit<URLProps, "searchParams">): Promise<Metadata> {
+  const question = await getQuestionById({ questionId: params.id });
+
+  return {
+    title: `"${question.title}" — DevOverflow`,
+  };
+}
 
 const Page = async ({ params, searchParams }: URLProps) => {
   const { userId: clerkId } = auth();

app/(root)/question/edit/[id]/page.tsx

@@ -6,6 +6,11 @@ import { getQuestionById } from "@/lib/actions/question.action";
 import { getUserById } from "@/lib/actions/user.action";
 
 import type { ParamsProps } from "@/types";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Edit Question — DevOverflow",
+};
 
 const Page = async ({ params }: ParamsProps) => {
   const { userId } = auth();

app/(root)/tags/[id]/page.tsx

@@ -5,9 +5,21 @@ import NoResult from "@/components/shared/NoResult";
 import Pagination from "@/components/shared/Pagination";
 import LocalSearchbar from "@/components/shared/search/LocalSearchbar";
 
-import { getQuestionsByTagId } from "@/lib/actions/tag.action";
+import { getTagById, getQuestionsByTagId } from "@/lib/actions/tag.action";
 
 import type { URLProps } from "@/types";
+import type { Metadata } from "next";
+
+export async function generateMetadata({
+  params,
+}: Omit<URLProps, "searchParams">): Promise<Metadata> {
+  const tag = await getTagById({ tagId: params.id });
+
+  return {
+    title: `Posts by tag '${tag.name}' — DevOverflow`,
+    description: tag.description || `Questions tagged with ${tag.name}`,
+  };
+}
 
 const Page = async ({ params, searchParams }: URLProps) => {
   const { userId: clerkId } = auth();