Name: モダンなWebアプリ構築のためのNext.js 14マスタリー
Rating: 3.933333333333333 (15 reviews)

学習内容

Next.jsプロジェクトの効率的なセットアップ

Next.jsにおける画像とレイアウトの管理

プロジェクトデータベースの構築とデータ投入

Tailwind CSSおよびCSS Modulesによるスタイリング

ルーティングによるページの作成と管理

Next.jsでのデータ取得と表示

カスタムGoogleフォントのアプリへの追加

GitHubおよびVercelを用いたアプリのデプロイ

NextAuth.jsによる認証機能の実装

コース内容

Next.jsを使用して、モダンで高性能なウェブアプリケーションの構築方法を学びます。構造化されたレイアウト、スタイリング、ルーティングによるシームレスなナビゲーションでプロジェクトをセットアップします。効率的なデータ取得と表示を行い、レンダリングとパフォーマンスを最適化します。ページネーション、CRUD操作、グローバル検索などの高度な機能を実装し、動的なウェブアプリを実現します…

Next.jsフレームワークに取り組む前に学ぶべき内容、このコースで期待できること、そして構築するものについて説明します。

プロジェクトのセットアップを行い、アプリにスタイリングを追加する方法を確認し、画像、フォント、ページ、レイアウトなどのビジュアル面を扱います。

Next.jsプロジェクトのセットアップ

プロジェクトのファイルおよびフォルダー構造の理解

Next.jsにおけるスタイリングアプローチ

グローバルCSSファイルの追加

Tailwind CSSを使用したスタイリング

CSSモジュールの利用

スタイルの条件付き適用

カスタムGoogleフォントの追加

チャレンジ：カスタムGoogleフォントの実装

Next.jsでの画像の扱い

アプリの新しいビューを簡単に作成・管理し、組み込まれたルーティングシステムによってすべてのページをシームレスにナビゲートする方法を学びます。

Next.jsのルーティングの仕組み

チャレンジ：新しいページを作成する

共通レイアウトコンポーネントの構築

Next.jsにおけるナビゲーションの最適化

アクティブリンクの作成と管理

GitHubおよびVercelアカウントを使用してNext.jsアプリをデプロイします。さらに、アプリに必要なデータを提供するためのデータベースを構築します。

GitHubおよびVercelアカウントの設定

Next.jsアプリのVercelへのデプロイ

プロジェクトデータベースの設定

データベースへの初期データの投入

データを明確かつ効率的に取得し、ユーザーに表示する方法を検討します。

Next.jsでのデータ取得方法

ダッシュボードページの操作

チャレンジ：データの取得と表示

Next.jsにおける動的レンダリングと静的レンダリング

ローダーの理解

特定部分ローダーの実装

チャレンジ：スケルトンローダーの作成

コンポーネントのグループ化によるローダーの最適化

ページネーション、CRUD操作、グローバル検索、フォームバリデーションなどの最新ウェブ機能の実装方法を学びます。

請求書ページの構築

検索機能の開発

Next.jsアプリへのページネーション追加

Next.jsにおけるサーバーアクションの利用

データベースに新しいアイテムを作成

データベース内のアイテムの更新

データベース内のアイテムの削除

チャレンジ：フォームバリデーションを実装する

Next.jsにおける認証実装。

Final Thoughts and Next Steps

あなたのテックスキルを強化！

最大55％オフで

What you'll get with our subscription:

500+ 人気コース修了証明書パーソナライズされた学習トラック40+ 実践的なプロジェクト

あなたのサブスクリプションには500以上のコースが含まれています：

Build a Knowledge Tracker App with Next.js

Build a real Knowledge Tracker app step by step using Next.js, TypeScript, and Tailwind CSS. Focus on creating a modern UI, structuring components, and implementing core features like daily cards, categories, and progress tracking.

Create Personal Finance Dashboard

Build a personal finance dashboard using Next.js, TypeScript, and Tailwind CSS. You will create an app where users can add transactions, organize them into categories, and track their total balance. The project focuses on working with local data, managing state, and building a clean and interactive UI.

Build an AI Content Generator

Build a practical AI-powered web app using Next.js, TypeScript, and Tailwind CSS. Create a content generator that takes user input, sends requests to an API, and displays generated results in real time. Learn how modern frontend apps interact with AI services while keeping the architecture simple and production-ready.

Build a Car Explorer and Fuel Cost Calculator

Build a real car explorer app using Next.js, TypeScript, and Tailwind, connect external APIs to load vehicle and fuel data, and create a fuel cost calculator that turns raw numbers into practical insights. Develop features like favorites and comparison while structuring a clean and scalable frontend project.

Build a Formula 1 Race Dashboard App

Build a modern Formula 1 dashboard that displays real race data, season standings, and driver details in a clean, interactive interface. Practice working with APIs, dynamic pages, and polished UI patterns.

Building Web Apps with Next.js

Explore how Next.js builds on React to create structured, production-ready web applications. Learn file-based routing, layouts, server and client components, and practical data handling patterns.

Develop Crypto Market Dashboard with Next.js

Build a real crypto market dashboard using Next.js, TypeScript, and Tailwind CSS. Fetch live data, display top coins, implement search and sorting, create a favorites system, and visualize price trends with charts. Focus on practical features and clean UI without overengineering.

Build a Knowledge Tracker App with Next.js

Build a real Knowledge Tracker app step by step using Next.js, TypeScript, and Tailwind CSS. Focus on creating a modern UI, structuring components, and implementing core features like daily cards, categories, and progress tracking.

Create Personal Finance Dashboard

Build a personal finance dashboard using Next.js, TypeScript, and Tailwind CSS. You will create an app where users can add transactions, organize them into categories, and track their total balance. The project focuses on working with local data, managing state, and building a clean and interactive UI.

Build an AI Content Generator

Build a practical AI-powered web app using Next.js, TypeScript, and Tailwind CSS. Create a content generator that takes user input, sends requests to an API, and displays generated results in real time. Learn how modern frontend apps interact with AI services while keeping the architecture simple and production-ready.

Build a Car Explorer and Fuel Cost Calculator

Build a real car explorer app using Next.js, TypeScript, and Tailwind, connect external APIs to load vehicle and fuel data, and create a fuel cost calculator that turns raw numbers into practical insights. Develop features like favorites and comparison while structuring a clean and scalable frontend project.

Build a Formula 1 Race Dashboard App

Build a modern Formula 1 dashboard that displays real race data, season standings, and driver details in a clean, interactive interface. Practice working with APIs, dynamic pages, and polished UI patterns.

Building Web Apps with Next.js

Explore how Next.js builds on React to create structured, production-ready web applications. Learn file-based routing, layouts, server and client components, and practical data handling patterns.

Develop Crypto Market Dashboard with Next.js

Build a real crypto market dashboard using Next.js, TypeScript, and Tailwind CSS. Fetch live data, display top coins, implement search and sorting, create a favorites system, and visualize price trends with charts. Focus on practical features and clean UI without overengineering.

なぜ人々はCodefinityを選ぶのか

Web Developer

Kwizera Mugisha

The teaching methodology at Codefinity is excellent, and I particularly appreciate how it has prepared me to handle real-world coding problems. Currently, I am delving into Node.js and eagerly anticipate building full-stack projects that integrate all the knowledge I have gained.

Senior Business Analyst

Sherry Barnes-Fox

My first course was 4 hours, I did it in a few days, "nugget-style". The instructions are very clear and easy to understand. There is even a hint to help you get the answer. I love the learning style that is used, it engages me.

Accounts Payable Specialist

Bill Wagner

I have really liked the browser-based lessons that allow me to code within the lesson. The RUN button allows me to test the code I write before submitting for a grade.

IT Support Specialist

Daniel Chinea

I have gained a lot of practical and logical thinking skills, along with patience for myself and confidence in myself that I can learn programming. Years ago, I would have never thought that I could learn programming in any way, shape or form, and I was able to obtain these certifications and skills with Codefinity.

Technology Project Manager

Steve Bruening

The learning was progressive and made it easy to follow along and make progress. I could feel my skills increasing and building on each other as the course went along.

Project Manager

Stephanie Chan

As I went through the first course of the Python track, I liked the way the course was lay out (in easy and digestible modules) with little exercises at the end of each concept.