ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/12
NEW
【週刊ドットインストール】 CSSバージョンのお話、レッスン制作の進捗、代表のひとりごと
PREMIUM
Next.js入門
ReactをベースにしたフルスタックなフレームワークであるNext.jsについて見ていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
React入門
(全23回)
PREMIUM
PREMIUM
0%
TypeScript入門
(全16回)
PREMIUM
PREMIUM
0%
Tailwind CSS入門
(全14回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(18)
質問と回答
(1)
#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日
リリース情報(note)
記事はありません。
詳細情報
最終更新日
2023年12月15日
バージョン情報
Next.js 14.0.3 / Chrome 119.0 / Visual Studio Code 1.84