<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__ceee284e7d5ff" src="https://embed.zenn.studio/card#zenn-embedded__ceee284e7d5ff" data-content="https%3A%2F%2Fgithub.com%2FHRTK92%2Fnext-boards" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/HRTK92/next-boards" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/HRTK92/next-boards</a></p>
<p>このサイトは、Next.jsとtailwindcss、nextauth、prismaを使用して作成した掲示板です。</p>
<h3 id="%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E7%89%B9%E5%BE%B4">
<a class="header-anchor-link" href="#%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AA%E7%89%B9%E5%BE%B4" aria-hidden="true"></a> 技術的な特徴</h3>
<ul>
<li>Next.js: サーバーサイドレンダリングを提供するJavaScriptフレームワーク</li>
<li>TailWindCSS: CSSフレームワーク</li>
<li>NextAuth.js: Next.js用の認証ライブラリ</li>
<li>Prisma: データベースを扱うためのORMツール</li>
</ul>
<h3 id="%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD">
<a class="header-anchor-link" href="#%E4%B8%BB%E3%81%AA%E6%A9%9F%E8%83%BD" aria-hidden="true"></a> 主な機能</h3>
<ul>
<li>ユーザー登録</li>
<li>ログイン</li>
<li>名前の変更</li>
<li>スレッドの作成
<ul>
<li>パブリックスレッド</li>
<li>プライベートスレッド</li>
<li>タグ付け</li>
</ul>
</li>
</ul>
<h3 id="%E4%BD%BF%E3%81%84%E6%96%B9">
<a class="header-anchor-link" href="#%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> 使い方</h3>
<ol>
<li>リポジトリをクローンする</li>
</ol>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash"><span class="token function">git</span> clone https://github.com/HRTK92/next-boards.git
</code></pre></div><ol start="2">
<li>パッケージをインストールする</li>
</ol>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash"><span class="token function">yarn</span> <span class="token function">install</span>
</code></pre></div><ol start="3">
<li>環境変数を設定する</li>
</ol>
<div class="code-block-container">
<div class="code-block-filename-container"><span class="code-block-filename">.env</span></div>
<pre class="language-env"><code class="language-env">DATABASE_URL={DATABASE_URL}
SECRET={NEXTAUTH_SECRET}

LINE_CLIENT_ID=
LINE_CLIENT_SECRET=

NEXTAUTH_URL=

NEXT_PUBLIC_SITE_NAME=
</code></pre>
</div><p><code>DATABASE_URL</code>は、MongoDBのURLを指定します。<br>
<code>SECRET</code>は、NextAuthのシークレットキーを指定します。<br>
<code>LINE_CLIENT_ID</code>と<code>LINE_CLIENT_SECRET</code>は、LINEログインのクライアントIDとクライアントシークレットを指定します。<br>
<code>NEXTAUTH_URL</code>は、NextAuthのURLを指定します。<br>
<code>NEXT_PUBLIC_SITE_NAME</code>は、サイト名を指定します。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p><code>prisma/schema.prisma</code>の<code>provider</code>を変更することで、データベースを変更できます。</p>
</div></aside>
<ol start="4">
<li>開発サーバーを起動する</li>
</ol>
<div class="code-block-container"><pre class="language-bash"><code class="language-bash"><span class="token function">yarn</span> dev
</code></pre></div><p><img src="https://raw.githubusercontent.com/HRTK92/next-boards/main/screenshot.png" alt width="300" loading="lazy" class="md-img"></p>
<h3 id="%E8%8B%A6%E5%8A%B4%E3%81%97%E3%81%9F%E7%82%B9">
<a class="header-anchor-link" href="#%E8%8B%A6%E5%8A%B4%E3%81%97%E3%81%9F%E7%82%B9" aria-hidden="true"></a> 苦労した点</h3>
<p>ログインしたユーザーのみがスレッドを観覧できるようにするには、どうすればいいのかという点で苦労しました。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e1e7f57fdb8e8" src="https://embed.zenn.studio/card#zenn-embedded__e1e7f57fdb8e8" data-content="https%3A%2F%2Fnext-auth.js.org%2Ftutorials%2Fsecuring-pages-and-api-routes" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://next-auth.js.org/tutorials/securing-pages-and-api-routes" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://next-auth.js.org/tutorials/securing-pages-and-api-routes</a><br style="display:none">
<code>unstable_getServerSession</code>を使用することで、APIを使用する際にログインしているかどうかを判定できるようになりました。</p>


Next.jsとTailWindCSS、NextAuth.js、Prismaを使用した掲示板

zenn.dev

nextjs

Discussion