Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
【Next.js13】最新バージョンのNext.js13をマイクロブログ構築しながら基礎と本質を学ぶ講座
Rating: 4.6 out of 5(440 ratings)
2,958 students

【Next.js13】最新バージョンのNext.js13をマイクロブログ構築しながら基礎と本質を学ぶ講座

Next.js13の/appディレクトリやApp Routerの扱い方とレンダリングの理解が重要になってきました。SSG/SSR/CSR/ISRの基礎を図解で振り返り、自信を持ってNext.js13が使えるようになるマスター講座になります。
Created byShin Code
Last updated 2/2024
Japanese

What you'll learn

  • Nextjs13の最新バージョンでのアプリ開発が学べる
  • ブログ構築しながらNextjs13の扱い方が学べる
  • Nextjs13になってからの/appディレクトリ扱い方が学べる
  • Nextjs13におけるAPI構築ができるようになる
  • Nextjs12とNextjs13の違いが理解できる
  • SSGとSSRとISRの違いが学べる
  • SSGとSSRの具体的な使いどころ・使い分けが分かる
  • layoutファイルで共通コンポーネントが実装できる
  • TailwindCSSでブログのレイアウトが構築できる
  • json-serverを使って簡単にモックデータを構築できる
  • cache: no-storeでSSRの実装ができる
  • 記事のCRUD操作ができるAPIを最新バージョンで構築できる
  • SSRではなくCSRでAPIを叩く場合の実装も理解できる
  • エラー用ページが作れるようになる
  • ローディング用ページが作れるようになる
  • ISRでブログ詳細記事が取得できるようになる
  • 投稿時のローディングアニメーションをTailwindCSSで実装できる
  • Supabaseの基礎が学べる
  • Supabaseを使ってブログ記事データを永続化できる
  • Nextjs13 × Typescriptでのアプリ開発が学べる
  • プリレンダリングの概念が理解できる
  • 動的ルーティングを構築できる
  • SEO対策の必要があるウェブアプリが構築できる

Course content

7 sections52 lectures3h 30m total length
  • 本講座で学べること2:08
  • 本講座の完成品デモ1:26
  • 完成品のソースコード0:13

Requirements

  • Reactの基礎の学習を終えている方
  • Javascriptの基礎が理解できている(変数の理解、関数の理解等)
  • 基本的なプログラミングの文法(if文やfor文など)
  • 簡単なHTMLやCSSを書いたことがある方
  • 他のプログラム言語を使ったことがある方

Description

Next.js13の最新バージョンを学ぶ講座となっています。

以前のNext.js12のバージョンでは/pagesディレクトリ構造が基本でしたが、最新バージョンでは/appディレクトリ構造が基本となっています。


■ 本コースの対象者

・Next.js12のバージョンは扱えるが、Next.js13の最新バージョンのキャッチアップが出来ていない方

・Next.js13におけるApp Routerの取り扱い方とAPI構築(App Routing)の方法を学びたい方

・Next.js初心者の方

・Next.jsを学んでReactの違いを明確に理解しておきたい方

・公式ドキュメントよりも動画でサクッと理解したい方

・CSRではない最新のレンダリング手法のSSG・SSR・ISRを学んでみたい方

・CDNやキャッシュについて学びたい方


最近のフロントエンド界隈ではReactよりも高速に動くNext.jsが採用されるケースが増えてきました。

最新のNext.js13のバージョンをキャッチアップしておくことで、すぐに応用して実務で活かすことができます。

知っておきたいクライアント・サーバーサイドレンダリングやプリレンダリング(SSG/SSR/ISR)の知識がこの講座1つで身に着けることができます。


■ 本コースを受講する際の注意点

・HTML/CSS/JavaScriptの基本的な文法とルールは教えていません。

・Reactの基礎は教えていません(JSXや関数コンポーネントの作り方等)

・簡単なターミナルコマンドの取り扱いも教えておりません。

Who this course is for:

  • Nextjs12のバージョンを利用したことがあり、Nextjs13の最新バージョンを学習したい方
  • Nextsj13とSupabaseを使ってブログ構築をしてみたい方
  • 実際のプロジェクトを通してNextjsのメリットを享受してみたい方
  • ウェブページ/アプリのSEO対策に興味がある方
  • ウェブページ/アプリの読み込み速度を向上させたい方
  • クライアントとサーバーサイドの概念を理解したい方