📓

Next.js Learn Courseをやってみる Chapter1

2023/10/28に公開

Next.js

React

TypeScript

tech

Learn Next.js

Next.js14の発表ツイートを見て、Next.jsの新しいチュートリアルが出ていることに気づきました。

今仕事ではPagesRouterを使っていて、AppRouterの事なんとなくしか分かってないのでせっかくだし最初から読んでみようと始めてみました。

https://nextjs.org/learn

全16章の大作です。

金融向けのダッシュボードの作成をします。

このページの要件としては、

Webに公開されたページ
ログインページ
認証機能によってページへのアクセスを制御
請求の追加・編集・削除が可能

さらにデータベースも付随！(どうすんだ・・・？)

学ぶことの概要

Styling
- しかも色んな方法を紹介
Optimizations
- 画像・リンク・フォントの最適化
Routing
- レイアウトとページの作成方法
Data Fetching
- Vercel上にデータベースを設定し、データのフェッチ・ストリーミングのベストな方法
Search and Pagination
- 共有できる検索とページネーション。URL Search Paramsを使って。(機能っぽい大文字?)
Mutating Data
- React Server Actionsを使用したデータの変更方法とNextjsのキャッシュの再検証
Error Handling
- 404などのエラーハンドリング
Accessibility
- サーバーサイドのフォームバリデーション
Authentication
- NextAuth.jsとミドルウェアを使った認証(認証もできんの・・・？)
Metadata
- 共有するためのアプリの準備

まだ今の状態だと分からんところもありますが、これだけあったらもうNext.jsだけやっとけばWebアプリ作れちゃうんじゃない？？？という気持ちにさせてきます。

前提知識

ReactとJavascriptの知識。

なんと、React用の勉強資料も用意されてる。知らなかった。。

必要なもの

Nodejs18以降
GithubAccount, Vercel Account
- Vercelアカウントが必要ということなので、ここで価格面が気になってきますね

1章：まず始めに

プロジェクトの作成

npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"

コマンド１つでスターター用のプロジェクトをClone出来るのはありがたいですね。なお、このチュートリアルはコンテンツも中身のコードもどんどん変わりうるそうです。注意。

さらに、こんな記載が。

Unlike tutorials that have you write code from scratch, much of the code for this course is already written for you. This better reflects real-world development, where you'll be working with existing codebases.

Our goal is to help you focus on learning the main features of Next.js, without having to write all the code.

フルスクラッチで書くチュートリアルとは異なり、サンプルの多くはすでに書かれているとのことで、既存のコードベースで作業することになる実際の開発現場を反映してるとのこと。。。とてつもない顧客指向でぐんぐんオンボーディングされてしまいます。

フォルダ構造

app(コンポーネント・ロジック・すべてのRouting)
- lib(再利用可能なユーティリティ関数)
- ui(UIコンポーネント, カードやテーブルなど)
public(静的なアセット)
scripts(後にDBを作成するときのファイルなど)
next.config.js

一杯あるけど今はまだ全てを理解する必要はない。

Placeholder data

UIを作成するときに、APIからのレスポンスをテストデータで使えると楽ですよね。そんな時は、サードパーティサービスのmockAPIを使用するか、

app/lib/placeholder-data.js に、テスト用のデータを置いているそう。このデータは後で作ることになるDBのテーブルを表現しています。

const invoices = [
  {
    customer_id: customers[0].id,
    amount: 15795,
    status: 'pending',
    date: '2022-12-06',
  },
  {
    customer_id: customers[1].id,
    amount: 20348,
    status: 'pending',
    date: '2022-11-14',
  },
  // ...
];

Typescript

このチュートリアルはTSで書かれています。

app/lib/definitions.tsx にデータベースで返される型を定義。

export type Invoice = {
  id: string;
  customer_id: string;
  amount: number;
  date: string;
  // コメントで丁寧にユニオン型について説明。。。このstatusは定義された２つの文字しか受け取らないこと
  status: 'pending' | 'paid';
};

Typescriptが分からないユーザーにも分かるように、配慮が散りばめられてます。。

このチュートリアルではデータ型を手動で定義しているが、より型安全に書きたければ、Prismaをお勧めしています。

サーバーの起動

npm i
npm run dev

localhost:3000にアクセスすると

まずはこのスタイリングが何もないページが表示されます。

このページからどんどん綺麗なページを作っていくと思うとワクワクしますね！！！