ReactをベースにしたフルスタックなフレームワークであるNext.jsについて見ていきます。

0%

• #01 Next.jsを使ってみよう (02:46) 無料公開中

  • 概要
  • レッスンの構成
  • 必要となる前提知識
  未完了
• #02 Node.jsを導入していこう (01:45) 無料公開中

  • Node.jsの導入
  • インストーラーの起動
  • Windows版に関する注意点
  未完了
• #03 macOSにNext.jsをインストールしよう (02:28) 無料公開中

  • ターミナルの起動
  • デスクトップへの移動
  • Next.jsのインストール
  未完了
• #04 WindowsにNext.jsをインストールしよう (02:24) 無料公開中

  • PowerShellの起動
  • Next.jsのインストール
  未完了
• #05 ファイル構成を確認しておこう (02:18)

  • プロジェクトフォルダの設定
  • ファイル構成の確認
  • 開発用サーバーの起動
  • ブラウザでの確認
  未完了
• #06 page.tsxを編集してみよう (02:46)

  • page.tsxの編集
  • ページ描画の仕組み
  未完了
• #07 layout.tsxを編集してみよう (02:34)

  • layout.tsxの説明
  • layout.tsxの編集
  • タイトルの設定
  未完了
• #08 ユーザーの一覧を配置してみよう (02:03)

  • global.cssのリセット
  • ユーザー一覧の配置
  未完了
• #09 Tailwind CSSでスタイリングしてみよう (02:34)

  • p-4
  • text-lg
  • border-b
  • pb-1
  • mb-1
  • list-disc
  • ml-4
  未完了
• #10 ルーティングの仕組みを理解しよう (02:14)

  • ページが表示される仕組み
  • ルーティング
  • ダイナミックルーティング
  未完了
• #11 ダイナミックルーティングを使ってみよう (02:03)

  • フォルダの作成
  • [userId]
  • page.tsxの作成
  • 動作確認
  未完了
• #12 URLから値を受け取ってみよう (02:42)

  • プロパティの受け取り
  • interfaceによる型定義
  • 値の埋め込み
  • 動作確認
  未完了
• #13 Linkコンポーネントを使ってみよう (02:40)

  • Linkコンポーネント
  • text-blue-500 hover:text-lblue-700
  • 戻るリンクの設定
  未完了
• #14 ユーザーのデータを管理してみよう (02:16)

  • lib/users.tsの作成
  • usersの定義
  • interfaceの定義
  未完了
• #15 ユーザーの一覧を描画してみよう (02:42)

  • export
  • userItems
  • ユーザー一覧の描画
  未完了
• #16 ユーザーページを描画してみよう (02:38)

  • userの定義
  • Number()
  • 値の埋め込み
  • mt-4
  未完了
• #17 エラーページを表示してみよう (02:01)

  • ランタイムエラー
  • 条件分岐
  • notFound()
  未完了
• #18 not-found.tsxを編集してみよう (02:20)

  • not-found.tsxの作成、編集
  • 動作確認
  未完了

#04 WindowsにNext.jsをインストールしよう

npx -y create-next-app@14 を実行するとエラーが発生しました

2024年2月9日

#05 ファイル構成を確認しておこう

public フォルダがない場合、どうしたらいいですか?

2025年5月28日

記事はありません。

最終更新日

2023年12月15日

バージョン情報

Next.js 14.0.3 / Chrome 119.0 / Visual Studio Code 1.84

サービスメニュー

• レッスン一覧
• 料金プラン
• 法人向けライセンス
• 256times
• 運営からのお知らせ
• プログラミング学習ガイド
• プログラミング学習相談室

ご利用にあたって

• ヘルプ
• 利用規約
• プライバシーポリシー
• 利用者情報の外部送信について
• 運営企業情報
• 採用情報
• 教材利用について
• お問い合わせ

ソーシャルメディア

• note
• X (@dotinstall)
• Facebookページ

更新情報

• 新着レッスンRSS
• 新着補足情報RSS