Nextjs + Prisma + supabase シンプルSNS and SEO対策

https://sunnynextsns.vercel.app/

Nextjs + Prisma + supabaseでかんたんなアプリを作ってみました！
まだPrismaの理解があまりもできてないですが、この場合に使うんだっとわかるようになりました！

renderでAPIを保存してますが、これって毎日deployしないとAPIが動かないみたいです。。
なので表示されない場合もありますね。。gg
https://dashboard.render.com/

supabaseとはデータベースを保存して管理してくれるフラットフォームです。
Prismaはデータを使いやすくしてくれるライブラリーで、PrismaClientを使ってデータペースのデータを読んだり書いたりするのができます！

実装の中で登録した最新のpostを持ってくるAPIです。

最後のPOST 10個持ってくる

router.get("/get_latest_posts", async (req, res) => {
  try {
    const latestPosts = await prisma.post.findMany({
      take: 10, // 10個を持ってくる
      orderBy: { createdAt: "desc" }, // createdAt（日付）を基準で降順整列する
      include: {
        author: {
          include: {
            profile: true, // 作成者のプロフィールを持ってくる
          },
        },
      },
    });
      // 持ってきた最新POSTをJSON形式でres
    return res.json(latestPosts);
  } catch (err) {
    console.log(err);
    res.status(500).json({ message: "サーバーエラーです。API" });
  }
});

あと、大事なSEO! Next12ではHeadMeta.tsxを使ったらしいですが、13-14になってからは動的なmetadataはgenerateMetadata()を使います！

例えばプロフィールページでタイトルとディスクリプションをまた設定したい場合は
profileData内のデータを出して設定します。

export async function generateMetadata({ params }: any) {
  const profileData = await getDetailProfile(params?.userId);
  return {
    title: `profile/${profileData.user.username}`,
    description: `${profileData.user.username}のプロフィールです。`,
  };
}

また統一で入ることはlayout.tsxでtemplateで設定可能です。

export const metadata: Metadata = {
  title: {
    default: "Next SNS APP", //
    template: "Next SNS APP | %s",
  },
  description: "Next SNS APP",
};

以下のように書く方法もあります。

title,
    description,
    keywords: tags,
    openGraph: {
      title,
      description,
      url: `/${flattenedPath}`,
      siteName: "Next SNS",
      images: {
        url: imgUrl || "",
        alt: "Post Image",
      },
      locale: "ja_JP",
      type: "article",
      tags,
    },
    twitter: {
      card: "summary_large_image",
      creator: "yunjeoming",
      title,
      description,
      images: {
        url: imgUrl || "",
        alt: "Post Image",
      },
    },
  };