このチュートリアルでは、フルスタックアプリケーションを開発しながらNext.jsの機能を紹介していきます。

実際にSNSアプリを開発しながらNext.jsの機能を理解していく構成になっているので、順番に進めていくことで基礎知識を身につけることができます。

動画で学びたい方はこちらから

本チュートリアルの全体像

本チュートリアルを通じて学べる内容は以下のようになります。

1. Next.jsの開発環境をセットアップ
2. 画面デザインしながら基礎を学ぼう
3. App Routerを理解して使ってみよう
4. Next.js+Postgres+PrismaでDB設計
5. サーバコンポーネントでデータ取得
6. サーバアクションでデータ変更
7. Vercel Blobで画像アップロード実装
8. Suspenseでローディングをリッチに
9. Zodを使ってバリデーション実装
10. useActionStateでローディング実装
11. Auth.js v5で認証機能導入
12. Route HandlersでAPIを設計

作るもの

本チュートリアルでは、飼っている犬の画像をシェアできるインスタ風SNSを作ります。

犬画像専用SNSということでイヌスタグラム、略してイヌスタと名付けました🐕

開発するアプリの全体像を知るために、各画面を簡単に紹介していきます。

トップページ

ユーザが最初に訪れるページです。

特に複雑な機能はありませんが、サービスの第一印象を決める重要なページです。

ダッシュボード

ダッシュボードではユーザの投稿管理ができます。

投稿をクリックすると、投稿編集画面に進みます。

プロフィール編集

プロフィール編集画面では、名前や自己紹介、アイコンを変更できます。

投稿作成

この画面では、画像を選択して投稿の説明を入力すると投稿が作成できます。

投稿編集

投稿編集画面では、キャプションの修正ができます。

新着投稿

ユーザが投稿した投稿が新着順に並んだ画面です。

各投稿画面をクリックすると投稿詳細画面に移動します。

投稿詳細

投稿詳細画面では、以下の機能があります。

• 投稿情報
• オーナー情報
• コメント一覧
• コメント投稿機能

オーナー一覧

登録オーナー一覧が見られます。

オーナー詳細

オーナーが投稿した画像一覧が表示されます。

システム概要

本チュートリアルで作成するアプリのシステム概要です。

※各章で詳しく解説するので、現時点では理解しなくて構いません。

開発環境

Node.js

以下のサイトからダウンロードしてください。

https://nodejs.org/en

GitHub

GitHubアカウントを作成してください。

https://github.com/signup

VSCode

以下のサイトからダウンロードしてください。

https://code.visualstudio.com

VSCode拡張機能

以下の拡張機能を有効化することをオススメします。

• ESLint
• Prettier
• EditorConfig for VS Code

プロジェクト作成

それではプロジェクトを作成してみましょう。

以下のコマンドを実行します。

npx create-next-app@latest --example https://github.com/techinit-blog/inusta-next-example

プロジェクト名を聞かれるので、 inusta-next としましょう。

プロジェクト起動

続いて開発サーバを起動してみましょう。

以下のコマンドを実行します。

cd inusta-next

npm run dev

以下のページが表示されれば成功です🎉

まとめ

以上で本チュートリアルに必要な開発環境が整いました！

次回から実際に開発を進めていきながらNext.jsの理解を深めていきましょう！

Next.jsで画面デザインしながら基礎を学ぼう

はじめにSNSのLP(ランディングページ）をデザインしながら、Next.jsで画面構築する方法を学んでいきます。本チュートリアルではTailwindを使って画面のレイアウトを構築していきます。動画で学びたい方はこちらからhttps://www.youtube.com/watch?v=2KzxqKmKul8チュートリアルの全体像本チュートリアルを通じて学べる内容は以下のようになります。Next.jsの開発環境をセットアップ画面デザインしながら基礎を学ぼうApp Routerを理解して使ってみようNext.js+Postgres+PrismaでDB設計サーバコンポーネントでデータ取得サーバアクション...