【イントロダクション】Next.jsのチュートリアルをやってみた

これはNext.jsの公式チュートリアルのイントロダクションに関するメモです

Next.jsの公式チュートリアルの該当ページ

Learn Next.js | Next.js

Learn how to build a full-stack web application with the free, Next.js App Router Course.

nextjs.org

前置き

本チュートリアルでは、Next.js（App Router）でフルスタックウェブアプリを作成します

作るもの

簡単な財務ダッシュボードを作ります。

（とはいえ、あまり完成品のイメージがわかない。。。）

機能としては

1. パブリックに公開されているページ
2. ログイン
3. ログイン後に見れるダッシュボード
4. ユーザが請求書を追加、編集、削除できる
5. データベースも使用

概要

1. UIを整える
2. 画像、リンク、フォントの最適化
3. ルーティング
4. DBからのデータの取得
5. 検索とページネーション
6. キャッシュ
7. エラー処理
8. バリデーションとアクセシビリティ
9. 認証
10. メタデータ

前提

• JavaScriptおよびReactの基本を理解していること

Reactを触ったことないよという方はReact Foundationsコースを先に受講するとよいです

システム要件

• Node.js 18.17.0以降がインストールされている。
• OS：macOS、Windows（WSLでも可）、Linux

今回私は、WindowsPCでWSL2のUbuntu 22.04.4、Node.js 18.17.1を使います

Node.jsをインストールしていない場合は↓の記事を参考にしてみて下さい

【Ubuntu】LTS版のNode.jsをインストールしてみる

Ubuntuでnodeコマンドが使えなくなりました。。。 そもそも前から使えていたか微妙ですが、nodeコマンドが使えるようにしていきます！ エラー nodeコマンドを実行すると、このようなエラーが出ました...

hisuiblog.com

2023.06.23

次章のメモ

【1章】Next.jsのチュートリアルをやってみた

これはNext.jsの公式チュートリアルの1. Getting Started に関するメモです 前章のメモ Next.jsの公式チュートリアルの該当ページ Next.j...

hisuiblog.com

2024.04.13