inflearn logo
inflearn logo

究極のNext.js 14ポートフォリオサイト制作(ゼロからプロへ)

このコースでは、Next.js 14、React.js、Tailwind CSS、そしてNodemailerを使用して、完全でモダンかつプロフェッショナルなポートフォリオサイトを構築するプロセスをステップバイステップでガイドします。 複雑なフロントエンドの概念を学生が理解できるようサポートしてきた経験に基づき、私は明確な説明、実例、そして実践的な実装に重点を置いています。単に理論を説明するのではなく、プロジェクトのセットアップから最終的なデプロイまで、すべてを一緒に構築します。これにより、「なぜ」「どのように」機能するのかを完全に理解することができます。 App Router、ファイルのコロケーション(配置)、プライベートおよびダイナミックルート、ナビゲーション、レイアウト、メタデータ、ローディング状態など、Next.js 14のコアコンセプトを学びます。基礎が明確になったら、動的コンテンツ、スムーズなスクロールアニメーション、ダウンロード可能なPDFファイル、スクロール状態に応じたコール・トゥ・アクション(CTA)ボタンを備えた本格的なポートフォリオサイトを構築します。 コースの最後には、ウェブサイトをVercelにデプロイし、ソースコードをGitHubで公開します。また、ReactのルーティングとNext.jsのルーティングの違いを自信を持って理解し、実用的でプロダクションレベルのアプリケーションを構築する方法を習得できます。 Next.jsの事前経験は必要ありません。

4名 が受講中です。

難易度 入門

受講期間 無制限

Next.js
Next.js
react.js
react.js
TailwindCSS
TailwindCSS
JavaScript
JavaScript
nodemailer
nodemailer
Next.js
Next.js
react.js
react.js
TailwindCSS
TailwindCSS
JavaScript
JavaScript
nodemailer
nodemailer

受講後に得られること

  • Next.js 14とReactを使用して、ゼロから完全なポートフォリオサイトを構築する

  • Next.jsにおけるダイナミックルーティング、プライベートルート、およびファイルのコロケーションをマスターする

  • スムーズなスクロール効果、アニメーション、そしてインタラクティブなUIコンポーネントを作成します

  • Tailwind CSSを使用してレスポンシブなレイアウトをデザインする

  • NodemailerとNext.js APIを使用して、数千通のメールを送受信する

  • ウェブサイトから直接PDFドキュメントを作成し、ダウンロードします。

  • Vercelに本番環境対応のアプリケーションをデプロイする

  • プロジェクトのソースコードをGitHubで公開・管理する

究極のNext.js 14ポートフォリオサイト制作 – ゼロからデプロイまで

Next.js 14、React、Tailwind CSS、Nodemailerを使用し、フロントエンド、フルスタック、およびWebアプリケーション開発者が採用している実務レベルの業界標準に従って、モダンで高性能なポートフォリオサイトを構築しましょう。

このコースは、理論から実際のプロジェクトへの移行に苦労している学生のために設計されています。開発者の指導やメンタリングの経験に基づき、抽象的な説明ではなく、ステップバイステップで、視覚的な例、図解、そして実践的な実装を用いて複雑な概念を解説するためにこのコースを作成しました。

単にNext.jsを学ぶだけではありません。プロフェッショナルと全く同じように、実戦投入可能な完全なポートフォリオを構築し、Vercelにデプロイして、GitHubでコードを公開します。

推奨されるビジュアル:

  • 最終的なポートフォリオサイトのプレビュー(デスクトップ&モバイル)

  • プロジェクトのフォルダ構造図

  • Next.js App Routerのビジュアルフロー

学習内容

セクション (1): コアキーワード – Next.js 14の基礎とルーティング

このセクションでは、Next.js 14のコアアーキテクチャと、Appルーターを使用したモダンなReactアプリケーションの構造化について学びます。

次のような内容を学びます:

  • Next.js 14 の App Routerとファイルベースのルーティングシステムを理解する

  • ファイルのコロケーション、プライベートルート、ルートグループ、およびネストされたルートについて学ぶ

  • 動的ルーティングをマスターし、ページ間でデータを渡す方法を学ぶ

  • ReactのルーティングとNext.jsのルーティングの違いを理解する

  • レイアウト、テンプレート、メタデータ、ローディング状態、およびエラーページを正しく使用する

推奨されるビジュアル:

  • App Routerのフォルダ構造図

  • 動的ルートのフローチャート

  • レイアウトとテンプレートの比較画像

セクション (2): コアキーワード – UI、アニメーション、API、およびデプロイ

このセクションでは、学習した知識を応用して、実用的な機能を備えた完全にダイナミックでインタラクティブなポートフォリオサイトを構築します。

次を行うことになります:

  • Tailwind CSSを使用してレスポンシブなレイアウトを構築する

  • スムーズなスクロール効果とアニメーションを作成する

  • スライダー、カード、ナビゲーションドロワー、インタラクティブなボタンの実装

  • PDFドキュメントの生成とダウンロード(履歴書ボタン)

  • スクロール連動型のコールトゥアクション(CTA)ボタンを作成する

  • Next.js APIを構築し、Nodemailerを使用して数千通のメールを送信する

  • アプリケーションをVercelにデプロイする

  • プロジェクトをGitHubで公開・管理する

推奨されるビジュアル:

  • UIコンポーネントのスクリーンショット(カード、スライダー、フォーム)

  • スクロールアニメーションのデモ

  • APIリクエスト/レスポンス図

  • Vercelのデプロイ画面

受講の前に

実習環境

オペレーティングシステムとバージョン

  • Windows 10 / 11

  • macOS

  • Linux / Ubuntu

必要なツール

  • Node.js (LTS版を推奨)

  • Visual Studio Code

  • Webブラウザ(Chrome、Edge、またはFirefox)

  • Git & GitHub アカウント(無料)

  • 仮想マシンは不要

PCスペック(推奨)

  • CPU: Intel i5 / Ryzen 5 以上

  • RAM:最小 8 GB(16 GB 推奨)

  • ストレージ:10–20 GBの空きディスク容量

  • GPU:不要

学習教材

  • 提供教材

    • プロジェクトの完全なソースコード

    • プロジェクトのアセットとリソース

    • 設定ファイル

    • 再利用可能なコンポーネント

    • ステップバイステップのビデオレッスン

    重要な注意事項

    • コース合計時間:約10時間以上

    • ソースコードはダウンロードまたはクラウドリンク経由で提供されます。

    • ファイルはセクションごとに整理されているため、簡単にナビゲートできます。

    • 受講生は、このプロジェクトを自身のポートフォリオに再利用することができます。


前提条件

  • HTML、CSS、JavaScriptの基礎知識があることが推奨されます

  • Next.jsの事前経験は不要です

  • Reactの基礎知識があると役立ちますが、必要な際はその都度説明します。

コースの注意事項

  • 高品質なビデオとクリアなオーディオ

  • 最高の学習方法:講師と一緒にコードを書きながら進めること

  • 受講生はQ&Aセクションで質問することができます。

  • 本コースは、将来のNext.jsのバージョンに合わせてアップデートされる可能性があります。

著作権および免責事項

  • すべてのコース教材およびソースコードは、個人利用および教育目的でのみ提供されています。 제공됩니다.

  • コンテンツの再配布や転売は許可されていません。

💡このコースを修了すると

このコースでは、履歴書やポートフォリオに適した形式で修了証明書を発行します。

コースを修了することでこれを受け取ることができ、学習成果の公式な証明として活用できます。

💡音声と字幕の言語オプションでスマートに学ぶ

学習スタイルに合わせて、音声と字幕の両方を切り替えることができます。お好みの言語を選択してください。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 断片的な例ではなく、実践的なプロジェクトの構築を通じてNext.js 14を学びたい初心者の方

  • 基本的なHTML、CSS、JavaScriptの知識があり、モダンなReactおよびNext.js開発にステップアップしたいフロントエンド開発者

  • ReactのルーティングとNext.jsのルーティングの違いを理解するのに苦労している学生たち

  • 自分のスキルを披露するためのプロフェッショナルなポートフォリオサイトを作成したい開発者

前提知識、
必要でしょうか?

  • HTML、CSS、およびJavaScriptの基礎知識があることが推奨されます。

  • Next.jsの事前経験は不要です。

  • Reactの基礎知識があると役立ちますが、コンセプトはステップバイステップで説明されるため、必須ではありません。

こんにちは
Ehizeex Techです。

カリキュラム

全体

76件 ∙ (10時間 1分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

まだ十分な評価を受けていない講座です。
みんなの役に立つ受講レビューを書いてください!

Ehizeex Techの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!

期間限定セール、あと7日日で終了

¥20,020

30%

¥3,458