Redis
 Computer >> コンピューター >  >> プログラミング >> Redis

Redis と NextAuth を使用して Next.js ブログ用の安全なコメント システムを作成する

このチュートリアルでは、ブログのコメント セクションを作成します。今後の技術スタックは次のとおりです。

<オル>
  • NextJS 13 (アプリディレクトリ内)
  • NextAuth (認証用)
  • Upstash Redis (コメントの保存用)
  • SWR (コメントのキャッシュと再検証用)

    • 始めましょう。

    NextAuth による認証の処理

    まず、誰でもコメントを投稿できるようにすることはできませんよね。誰かがスクリプトを実行して、あなたのブログにコメントをスパム送信する可能性があります。コメントを投稿できるようにする前に、まず認証システムを構築しましょう。 NextAuth を使用します。

    next-auth をインストールします 

    pnpm install next-auth

    これは、App ディレクトリ内のディレクトリ構造です。

    .
├── app
│ ├── api
│ │ └── auth
│ │ └── [...nextauth]
│ │ └── route.ts
│ ├── blog
│ │ ├── page.tsx
│ │ └── [...slug]
│ │ └── page.tsx
│ ├── components
│ │ └── LoginButton.tsx
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx

    Auth API ルートを設定します。

    // app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import GithubProvider from "next-auth/providers/github";
 
const handler = NextAuth({
 providers: [
 GithubProvider({
 clientId: process.env.GITHUB_CLIENT_ID!,
 clientSecret: process.env.GITHUB_CLIENT_SECRET!,
 }),
 ],
 callbacks: {
 async session({ session, token }) {
 if (session && session.user && token.sub) {
 session.user.sub = token.sub;
 }
 return session;
 },
 },
});
 
export { handler as GET, handler as POST };

    ここから新しい Github OAuth アプリケーションを作成して GITHUB_CLIENT_ID を取得します。 と GITHUB_CLIENT_SECRET .

    Redis と NextAuth を使用して Next.js ブログ用の安全なコメント システムを作成する

    NextAuth では、signIn を使用して任意のクライアント コンポーネントからサインインおよびサインアウトできるようになりました。 と signOut next-auth の関数 。ただし、その前に、アプリケーション全体をラップするコンテキスト プロバイダを設定する必要があります。

    // app/layout.tsx
"use client";
 
import "./globals.css";
 
import { SessionProvider } from "next-auth/react";
 
export default function RootLayout({
 children,
}: {
 children: React.ReactNode;
}) {
 return (
 <html lang="en">
 <SessionProvider>
 <body>{children}</body>
 </SessionProvider>
 </html>
 );
}

    SessionProvider これにより、アプリケーション内の任意のクライアント コンポーネントからセッション状態にアクセスできるようになります。

    useSession を使用してセッション状態にアクセスできます。 next-auth からのフック 。以下はログイン ボタンのサンプルです。

    "use Client";
 
import { signIn, signOut, useSession } from "next-auth/react";
 
export default function LoginButton() {
 const { data: session } = useSession();
 if (session) {
 return (
 <div>
 Signed in as {session.user?.name} using {session.user?.email} <br />
 <button onClick={() => signOut()}>Sign out</button>
 </div>
 );
 }
 return (
 <div>
 Not signed in <br />
 <button onClick={() => signIn()}> Sign in </button>
 </div>
 );
}

    これで、認証システムが整いました。次に、コメントを Redis データベースに保存するためのサーバー側ルートを開始しましょう。

    Redis データベースのセットアップ

    <オル>
  • Upstash に移動し、Redis データベースを作成します。
  • ユーザーに近いリージョンを選択し、TLS 暗号化を選択します。
  • @upstash/redis をインストールします パッケージ。
    • pnpm install @upstash/redis

    Redis と NextAuth を使用して Next.js ブログ用の安全なコメント システムを作成する

    <オル>
  • これらのトークンを .env.local にコピーします。 .

    • API エンドポイントを次のディレクトリ構造に記述してみましょう:

    .
├── app
│ ├── api
│ │ ├── auth
│ │ │ └── [...nextauth]
│ │ │ └── route.ts
│ │ ├── comment
│ │ │ ├── delete
│ │ │ │ └── route.ts
│ │ │ ├── get
│ │ │ │ └── route.ts
│ │ │ └── post
│ │ │ └── route.ts
│ │ └── lib
│ │ ├── getUser.ts
│ │ └── redis.ts
    <オル>
  • Redis クライアント インスタンスを作成する
    • // app/api/lib/redis.ts
import { Redis } from "@upstash/redis";
 
/*
This tries to load UPSTASH_REDIS_REST_URL
and UPSTASH_REDIS_REST_TOKEN from your environment
using process.env
*/
const redis = Redis.fromEnv();
 
export default redis;

    それはそれでした。これで Redis クライアントが設定されました。あとは、アプリケーションで APIroutes を設定するだけです。

    コメントの保存には Redis リストを使用します。これらはスタックとして機能するため、最新のコメントが一番上に表示されます。もちろん、クライアント側で並べ替えロジックを実装することもできますが、Redis がすでにこのデータ構造を提供している場合は、それを使用しましょう。

    コード全体はここで確認できます。その要点は次のとおりです。

    <オル>

  • コメントを作成します:redis.lpush(referer, comment) 。これにより、キー referer を持つリストにコメントがプッシュされます。

  • すべてのコメントを取得 redis.lrange(referer, 0, -1)

  • コメント redis.lrem(referer, 0, comment) を削除します 。これにより、comment がすべて削除されます。 キー referer を持つリスト内 .

    • API が導入されました。フロントエンドとバックエンドの統合に取り掛かりましょう。

    クライアント側のセットアップ

    そんなに難しいことではありません。 fetch を使用して作成したエンドポイントにアクセスするだけです。 swr というライブラリを使用します。 コメントのキャッシュと再検証用。ただし、React Query などの他のライブラリを自由に使用してください。

    useComment() を作成します onSubmit() を持つフック と onDelete() リクエストを行うためのハンドラ。

    "use client";
 
import { useState } from "react";
 
import type { Comment } from "@/app/interfaces/interfaces";
import useSWR from "swr";
 
const fetcher = (url: string) => fetch(url).then((res) => res.json());
 
const useComment = () => {
 const [text, setText] = useState("");
 const { data: comments, mutate } = useSWR<Comment[]>(
 "/api/comment/get",
 fetcher,
 {
 fallbackData: [],
 },
 );
 const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 e.preventDefault();
 try {
 await fetch("/api/comment/post", {
 method: "POST",
 body: JSON.stringify({ text }),
 headers: {
 "Content-Type": "application/json",
 },
 });
 setText("");
 await mutate();
 } catch (error) {
 console.log(error);
 }
 };
 const onDelete = async (comment: Comment) => {
 try {
 await fetch("/api/comment/delete", {
 method: "POST",
 body: JSON.stringify({ comment }),
 headers: {
 "Content-Type": "application/json",
 },
 });
 await mutate();
 } catch (error) {
 console.log(error);
 }
 };
 return { text, setText, comments, onSubmit, onDelete };
};
 
export default useComment;

    これでコメントセクションが完成しました。コメントの取得、投稿、削除が可能です。次のステップでは、コメント ボックスとコメント リストのコンポーネントを作成します。ここに完全なサンプルがあります


    1. Redis キャッシュを .NET Core API に統合してパフォーマンスとスケーラビリティを実現

      はじめに .NET Core のキャッシュとその仕組みについて説明します。したがって、以下のことを 1 つずつ見ていきます。 キャッシングの概要 キャッシュとは キャッシュの種類 キャッシュの実装 キャッシュはアプリケーションのパフォーマンスとスケーラビリティを向上させるため、現在ソフトウェア業界で非常に人気があります。私たちは Gmail や Facebook などの多くのウェブ アプリケーションを使用しており、それらの応答性を確認しており、優れたユーザー エクスペリエンスを実現しています。インターネットを使用するユーザーが多く、アプリケーションのネットワーク トラフィックと需要が膨

    2. RedisGraph 2.8がリリースされました！

      本日、RedisGraph2.8の一般提供リリースを発表できることをうれしく思います。このブログ投稿では、現在利用可能な主な新機能について詳しく説明しています。 RedisGraphについて RedisGraphは、Redis用の高性能でメモリファーストのグラフデータ構造です。 RedisGraphは、グラフのマルチテナンシーをサポートし（多数のグラフを同時に保持できます）、グラフに同時にアクセスする複数のクライアントにサービスを提供できます。 Redisスタックの一部としても利用できるようになりました。 RedisGraph2.8の主な新機能 より豊富なグラフモデル マルチラベルノード