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関連の記事について、まとめる必要がありそうなものがありましたら、更新していこうと思います。
ありがとうございました!!
関連記事
React propsとstateについて 入門
前回Reactの超入門ということで、プロジェクトの作成からReactでのブラウザ ...
Next.js 動的ルーティングによるクリーンなURLを作成
こんにちは、Yuuichi(@WestHillWorker)です。 今回は、Li ...
Next.js APIを作成してみよう
こんにちは、Yuuichi(@WestHillWorker)です。 今回は、Ne ...
React react-redux Todoリストで学ぶ 入門
ReactではReduxというStateの状態を管理するツールを利用するのが一般 ...
Next.js Layout作成してみよう
こんにちは、Yuuichi(@WestHillWorker)です。 今回は共通で ...