Next.js チュートリアル 入門 まとめ

2020年9月13日

Next.jsについて、チュートリアルを参考に少しづつ理解していくまとめ記事となります。

そのままチュートリアルをせずに時間がある方は少し変更を加えて、理解をしながら進めると良いと思います。

実際に手を動かしながら、サンプルコードを実行することで理解が深まると思います。

スポンサーリンク

Next.js チュートリアルから始める

プロジェクト作成から簡単なブラウザ表示までを学びましょう。

Next.js ページ遷移Linkを使ってみよう

ページの遷移をnext.jsのLinkを使って学びましょう。

Next.js Layout作成してみよう

メニューなど共通で利用する必要があるLayoutについて学びましょう。

Next.js 動的なページを作成してみよう

LinkとuseRouterを利用して、動的なページについて学びましょう。

Next.js 動的ルーティングによるクリーンなURLを作成

前回の動的なページをクリーンなURLにしてみましょう。

Next.js APIを作成してみよう

簡単なAPIを作成して、Next.jsでのAPI作成方法について学びましょう。

Next.js getInitialPropsでページの非同期処理を学ぶ

前回作成した天気予報のAPIをgetInitialPropsを使って非同期データを取得する部分について学びましょう。

Next.js コンポーネントのスタイリングを学ぼう

styleをつけて、Next.jsでのデザインを学びましょう。

まとめ

今回チュートリアルを参考にしながら、自分で理解するために内容を少し変更しながら進めてみました。

実際に手を動かしながら進めたので、理解が深まりました。

また、Next.js関連の記事について、まとめる必要がありそうなものがありましたら、更新していこうと思います。

ありがとうございました！！

Next.js, react, フロントエンドnext.js, react

Posted by westworker