Next.jsの基礎を初心者向けに徹底解説！元ぼっち大学生のフリーランスエンジニアがおすすめの本を紹介しつつ詳しく説明します
今回はプログラミング初心者のぼっち大学生のみなさんに向けて、大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスエンジニアとして独立した経歴を持つ僕が、Next.jsの基礎知識について、できるだけ分かりやすく解説していきます。Next.js初心者におすすめの本も何冊か紹介しますので、興味のあるぼっち大学生はぜひ一度読んでいってください。
たっちゃん
ぼっちユニバーシティの運営者です。
大学ぼっち時代にプログラミングを学び始め、在学中にフリーランスのWebエンジニアとして独立。
本業はWebアプリケーションやWebサイトの受託開発がメインですが、最近はFlutterにハマっています。
趣味はバックパッカー旅行と立ち飲み屋さん巡り。
現在は都内でひとり法人を経営しながら、現役のぼっち大学生のみなさんへお役立ち情報を発信しています。
0. はじめに
ぼっち大学生のみなさんこんにちは！
今回は、プログラミング初心者のぼっち大学生の皆さんと一緒に、Next.jsの基礎知識について学んでいきたいと思います。
1. Nextって何？初心者向けの解説
Nextとは、みなさんがインターネットでよく見かけるウェブサイトやアプリを作るための道具箱のようなものです。
Nextを使うことで、簡単にかっこいいウェブサイトや便利なアプリを作成することができます。
1-1. Nextの基本概念とは？
1-1-1. ReactとNextの関係
Nextは、Reactという人気のあるプログラミング言語を使って作られています。
Reactは、ウェブサイトをパーツごとに分けて作ることができるので、組み立てるのが楽しいパズルのようです。
Nextは、Reactをもっと便利に使えるようにするために作られたツールです。
1-1-2. Nextの特徴
Nextには、たくさんの特徴がありますが、その中でも特にすごいのは、ウェブサイトがすごく速く表示されることです。
また、Nextは自動的にコードを整理してくれるので、作業がとてもスムーズに進みます。
1-2. Nextができること・使われる場面
1-2-1. ウェブサイト制作
Nextを使うと、ウェブサイトを簡単に作ることができます。
例えば、こんなふうにしてウェブサイトの1ページを作ってみましょう。
import React from "react";
export default function Home() {
return (
<div>
<h1>こんにちは、Nextの世界へようこそ！</h1>
<p>これは私たちの素晴らしいウェブサイトです。</p>
</div>
);
}このコードを書くだけで、簡単なウェブサイトができあがります。
1-2-2. Webアプリケーション開発
Nextは、ウェブサイトだけでなく、便利なWebアプリケーションも作ることができます。
例えば、天気を教えてくれるアプリを作ることができます。
データを取得するために、以下のようなコードを書くことができます。
import React, { useEffect, useState } from "react";
export default function WeatherApp() {
const [weather, setWeather] = useState(null);
useEffect(() => {
fetch("https://api.openweathermap.org/data/2.5/weather?q=東京&appid=あなたのAPIキー")
.then((response) => response.json())
.then((data) => setWeather(data));
}, []);
if (!weather) {
return <div>天気情報を取得中...</div>;
}
return (
<div>
<h1>東京の天気</h1>
<p>気温: {weather.main.temp}℃</p>
<p>天気: {weather.weather[0].description}</p>
</div>
);
}このコードを使うと、東京の天気情報を表示するWebアプリケーションができあがります。
Nextを使えば、さまざまなアプリを作ることができるので、アイデア次第でたくさんの面白いものが作れますね。
これで、Nextの基本的な概念や使われる場面について学ぶことができました。
Nextを使って、自分だけのウェブサイトやアプリを作ってみてください。
きっと楽しいですよ。
2. Nextを始める前に知っておきたいポイント
Nextを使ってウェブサイトやアプリを作る前に、いくつか大切なことを知っておく必要があります。
この章では、Nextを始めるために必要な準備や知識について説明します。
2-1. Nextのインストール方法
2-1-1. Node.jsの準備
Nextを使う前に、Node.jsというプログラムが必要です。
Node.jsをインストールすることで、Nextを使うための道具箱が揃います。Node.jsは、このウェブサイトからダウンロードできます。
インストールが終わったら、コマンドプロンプトやターミナルでnode -vと入力して、バージョンが表示されれば成功です。
2-1-2. create-next-appの使い方
Nextを使い始めるには、「create-next-app」というツールを使ってプロジェクトを作成します。
まず、コマンドプロンプトやターミナルで以下のように入力してください。
npx create-next-app あなたのプロジェクト名これで、Nextのプロジェクトが作成されます。
次に、作成したプロジェクトのフォルダに移動して、npm run devと入力すると、開発用のウェブサイトが立ち上がります。
2-2. 必要な知識やスキル
2-2-1. Reactの基礎知識
NextはReactを使っていますので、Reactの基本的な使い方を知っておくと、Nextも楽に使えます。
Reactでは、ウェブサイトをパーツごとに分けて作るので、例えばボタンや画像など、それぞれをパーツ（コンポーネント）として作成して、組み合わせます。
2-2-2. JavaScriptとHTML/CSSの理解
NextやReactを使うには、JavaScriptとHTML/CSSの基本的な知識が必要です。
JavaScriptは、ウェブサイトやアプリを動かすためのプログラムを書く言語です。
HTMLは、ウェブページの構造を作るための言語で、CSSは、ウェブページをかっこよくデザインするための言語です。
これらの言語を理解しておくことで、Nextで作るウェブサイトやアプリがもっと楽しくて綺麗になります。
これで、Nextを始める前に知っておきたいポイントについて学ぶことができました。
これらの知識を身につけて、Nextでウェブサイトやアプリを作る準備が整いました。
早速Nextを使って、自分だけの素晴らしいウェブサイトやアプリに挑戦してみましょう。
楽しみながら学んでいくことで、どんどん上達していくことができますよ。
3. Nextの基本操作を学ぼう
Nextでウェブサイトやアプリを作るためには、基本操作を覚えることが大切です。
この章では、プロジェクトの作成や構成、Nextの主要なコマンドについて学んでいきましょう。
3-1. プロジェクトの作成と構成
3-1-1. プロジェクトの構造
Nextのプロジェクトは、いくつかのフォルダとファイルで構成されています。
主なものは以下の通りです。
pages: ここにウェブページを作成するファイルを入れます。1つのファイルが1つのページになります。public: 画像やフォントなどの静的なファイルを入れる場所です。styles: CSSファイルを入れるフォルダです。デザインやレイアウトを整えるために使います。
3-1-2. ページコンポーネントの理解
Nextでは、ウェブページを「ページコンポーネント」と呼ばれるもので作成します。
ページコンポーネントは、Reactのコンポーネントを使って作られ、 pages フォルダに入れます。
例えば、 pages フォルダに about.js というファイルを作成すると、 /about というURLでアクセスできるページができます。
// pages/about.js
import React from "react";
export default function About() {
return (
<div>
<h1>私たちについて</h1>
<p>ここは、私たちについてのページです。</p>
</div>
);
}3-2. Nextの主要なコマンド
3-2-1. 開発環境の立ち上げ
Nextで作ったプロジェクトを開発環境で立ち上げるには、以下のコマンドを使います。
npm run devこれで、開発用のウェブサイトが立ち上がります。
ブラウザで http://localhost:3000 にアクセスして、ウェブサイトを確認できます。
3-2-2. 本番ビルドとエクスポート
Nextで作成したウェブサイトを本番環境にデプロイするには、まずビルドを行います。
以下のコマンドでビルドを実行できます。
npm run buildビルドが完了したら、以下のコマンドで本番用のウェブサイトをエクスポートします。
npm run exportこれで、out フォルダに本番用のウェブサイトが生成されます。
out フォルダ内のファイルをウェブサーバーにアップロードすることで、インターネット上にウェブサイトが公開されます。
これで、Nextの基本操作について学ぶことができました。
プロジェクトの作成や構成、主要なコマンドを覚えておくことで、Nextでのウェブサイト開発がスムーズに進みます。
次の章では、Nextの高度な機能やテクニックについて学んでいきましょう。
例えば、動的なページの作成やAPIルートの使い方、データの取得や管理など、Nextを使ったウェブサイト開発がもっと楽しく、パワフルになります。
4. Nextで実践的なアプリケーションを作る方法
Nextを使って実践的なアプリケーションを作る方法を学びましょう。
ルーティングやページ作成、APIとデータの取得・表示方法について学びます。
4-1. ルーティングとページ作成
4-1-1. 動的ルーティングの使い方
動的ルーティングは、URLの一部を変数のように扱う方法です。
例えば、ブログ記事のページを作るとき、記事ごとに別々のページを作る代わりに、1つのページで複数の記事を表示できます。
pages フォルダに [id].js という名前のファイルを作成しましょう。
[id] は変数のように扱われます。
// pages/[id].js
import React from "react";
export default function BlogPost({ id }) {
return (
<div>
<h1>ブログ記事 {id} です</h1>
<p>ここに記事の内容が表示されます。</p>
</div>
);
}
export async function getServerSideProps({ params }) {
const id = params.id;
return { props: { id } };
}4-1-2. ネストされたルートの作成
ネストされたルートは、親子関係のあるページを作るときに使います。
例えば、カテゴリーと商品のページを作るときに便利です。
pages フォルダに category フォルダを作り、その中に [id].js ファイルを作成します。
これで、 /category/1 のようなURLが作れます。
// pages/category/[id].js
import React from "react";
export default function Category({ id }) {
return (
<div>
<h1>カテゴリー {id} です</h1>
<p>ここにカテゴリーの説明が表示されます。</p>
</div>
);
}
export async function getServerSideProps({ params }) {
const id = params.id;
return { props: { id } };
}4-2. APIとデータの取得・表示方法
4-2-1. getStaticPropsを利用した静的データ取得
getStaticProps は、ビルド時にデータを取得する関数です。
例えば、ブログ記事の一覧を表示するページで使います。
// pages/blog.js
import React from "react";
export default function Blog({ posts }) {
return (
<div>
<h1>ブログ一覧</h1>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</div>
);
}
export async function getStaticProps() {
// ここでAPIからデータを取得する
const res = await fetch("https://api.example.com/posts");
const posts = await res.json();
return {
props: {
posts,
},
revalidate: 60, // 60秒ごとに再ビルドしてデータを更新する
};
}4-2-2. getServerSidePropsを利用したサーバーサイドデータ取得
getServerSidePropsは、ページにアクセスするたびにデータを取得する関数です。例えば、リアルタイムな情報を表示するページで使います。
// pages/realtime.js
import React from "react";
export default function Realtime({ data }) {
return (
<div>
<h1>リアルタイム情報</h1>
<p>現在のデータは {data.value} です。</p>
</div>
);
}
export async function getServerSideProps() {
// ここでAPIからデータを取得する
const res = await fetch("https://api.example.com/realtime");
const data = await res.json();
return {
props: {
data,
},
};
}これで、Nextを使って実践的なアプリケーションを作る方法を学ぶことができました。
ルーティングやページ作成、APIとデータの取得・表示方法を理解しておくことで、Nextでのアプリケーション開発がスムーズに進みます。
5. Nextを使ったデザインとスタイルの適用
Nextで作ったアプリケーションにデザインとスタイルを適用しましょう。
CSSモジュールを活用したスタイリングや、人気のCSSフレームワークを使ったデザインについて学びます。
5-1. CSSモジュールを活用したスタイリング
5-1-1. CSSモジュールの基本概念
CSSモジュールは、CSSをコンポーネントごとに分ける方法です。
これにより、他のコンポーネントのスタイルに影響を与えず、簡単にスタイルを管理できます。
5-1-2. CSSモジュールの実装方法
まず、コンポーネントと同じフォルダに .module.css という名前でCSSファイルを作成しましょう。
例えば、 Button.module.css というファイルを作成します。
/* Button.module.css */
.button {
background-color: skyblue;
border: none;
padding: 10px 20px;
color: white;
}次に、コンポーネントでCSSモジュールをインポートして使います。
// Button.js
import React from "react";
import styles from "./Button.module.css";
export default function Button({ children }) {
return <button className={styles.button}>{children}</button>;
}5-2. 人気のCSSフレームワークを使ったデザイン
5-2-1. Tailwind CSSの導入方法
Tailwind CSSは、簡単にデザインができる人気のCSSフレームワークです。
まず、ターミナルで以下のコマンドを実行してインストールしましょう。
npm install tailwindcssそして、 styles フォルダに tailwind.css というファイルを作成し、以下の内容を記述します。
/* styles/tailwind.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";最後に、 _app.js ファイルで tailwind.css をインポートします。
5-2-2. Bootstrapの導入方法
Bootstrapも人気のCSSフレームワークです。
まず、 styles フォルダに bootstrap.css というファイルを作成し、BootstrapのCDNリンクを記述します。
/* styles/bootstrap.css */
@import url("https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css");最後に、 _app.js ファイルで bootstrap.css をインポートします。
// pages/_app.js
import "../styles/bootstrap.css";
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
export default MyApp;これで、Tailwind CSSとBootstrapが使えるようになりました。
どちらのフレームワークも、クラス名をHTML要素に追加するだけで簡単にデザインができます。
例えば、Tailwind CSSでボタンを作る場合は以下のように書きます。
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
クリックしてね
</button>Bootstrapで同じデザインのボタンを作る場合は、以下のように書きます。
<button class="btn btn-primary">
クリックしてね
</button>Nextを使ってデザインとスタイルを適用する方法を学びました。
CSSモジュールや人気のCSSフレームワークを使って、魅力的なアプリケーションを作成しましょう。
6. Nextの便利な機能を活用しよう
Nextには、さまざまな便利な機能があります。
ここでは、動的なインポートとコード分割、静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）について学びます。
6-1. 動的なインポートとコード分割
6-1-1. 動的インポートの理解と使い方
動的インポートとは、特定のコンポーネントやモジュールを必要になったときだけ読み込む方法です。
これにより、アプリケーションの読み込み速度が速くなります。
動的インポートは、 import() 関数を使って行います。
例えば、 HeavyComponent という大きなコンポーネントがあるとします。これを動的インポートするには、以下のように書きます。
import React, { useState, useEffect } from "react";
function App() {
const [HeavyComponent, setHeavyComponent] = useState(null);
useEffect(() => {
async function loadComponent() {
const { default: Component } = await import("./HeavyComponent");
setHeavyComponent(() => Component);
}
loadComponent();
}, []);
return (
<div>
{HeavyComponent ? <HeavyComponent /> : <p>読み込み中...</p>}
</div>
);
}
export default App;6-1-2. コード分割によるパフォーマンス向上
コード分割とは、アプリケーションのコードを小さな部分に分けて読み込む方法です。
これにより、読み込みが速くなり、ユーザー体験が向上します。Next.jsでは、動的インポートを使って簡単にコード分割ができます。
6-2. 静的サイト生成（SSG）とサーバーサイドレンダリング（SSR）
6-2-1. SSGとSSRの違いと使い分け
SSGは、ビルド時にすべてのページをHTMLファイルとして生成する方法です。
SSRは、ユーザーがページにアクセスするたびにHTMLを生成する方法です。
SSGは、表示速度が速くSEOに優れていますが、データの更新が頻繁にある場合は適していません。
SSRは、データの更新がリアルタイムで反映されますが、表示速度が遅くなることがあります。
6-2-2. ISR（増分静的再生成）の活用方法
ISRは、Next.jsが提供する革新的な機能で、SSGとSSRの良い点を組み合わせた方法です。
ISRでは、ビルド時に一部のページをHTMLファイルとして生成し、新しいデータが必要になったときだけ再生成を行います。
これにより、表示速度とデータの更新性が両立されます。
ISRを使うには、 getStaticProps 関数に revalidate オプションを設定します。 revalidate は、再生成を行う間隔を秒単位で指定します。
例えば、以下のコードでは、 revalidate を60に設定しています。
これにより、データが最大60秒以内に更新されることが保証されます。
export async function getStaticProps() {
const data = await fetchData();
return {
props: {
data,
},
revalidate: 60, // 60秒ごとに再生成を行う
};
}Nextの便利な機能を活用することで、アプリケーションのパフォーマンスやデータの取り扱いが向上します。
動的インポートとコード分割を使って読み込み速度を速くし、SSG、SSR、ISRを使い分けて適切なデータの更新方法を選ぶことが大切です。
これらの機能を理解し、うまく組み合わせてアプリケーションを開発しましょう。
7. Nextでのデプロイと公開
Nextで作ったウェブサイトやアプリケーションをみんなに見てもらうためには、インターネット上に公開する必要があります。
ここでは、Vercelや他のホスティングサービスを使って、どのようにデプロイして公開するかを説明します。
7-1. Vercelを使ったデプロイ方法
Vercelは、Next.jsの開発チームが作ったホスティングサービスで、Next.jsのアプリケーションを簡単にデプロイできます。
7-1-1. Vercelアカウントの作成と連携
まずはじめに、Vercelのウェブサイトにアクセスしてアカウントを作成しましょう。
アカウントができたら、GitHubやGitLabなどのリポジトリと連携します。
連携が完了すると、Next.jsのプロジェクトを選んでデプロイできるようになります。
7-1-2. デプロイとカスタムドメインの設定
プロジェクトを選んだら、「Deploy」ボタンを押してデプロイを開始します。
デプロイが成功すると、Vercelが自動でURLを生成してくれます。
このURLを使って、作ったウェブサイトやアプリケーションにアクセスできます。
また、独自のドメインを使いたい場合は、「Settings」メニューから「Domains」を選んで、カスタムドメインを設定できます。
7-2. 他のホスティングサービスでの公開方法
もちろん、Vercel以外のホスティングサービスでもNext.jsのアプリケーションを公開できます。
ここでは、NetlifyとFirebase Hostingを使ったデプロイ方法を紹介します。
7-2-1. Netlifyを使ったデプロイ
Netlifyにアクセスしてアカウントを作成し、リポジトリと連携します。
その後、「Build command」としてnext build && next exportを入力し、「Publish directory」にoutを指定してデプロイ設定を完了します。
最後に、「Deploy site」ボタンを押すと、Netlifyがデプロイを始めます。
7-2-2. Firebase Hostingでの公開方法
Firebase Hostingを使う場合は、まずFirebase CLIをインストールしてプロジェクトを作成します。
次に、 firebase.json ファイルにNext.jsのビルド設定を追加しましょう。
以下のような設定が必要です。
{
"hosting": {
"public": "out",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}この設定は、 out ディレクトリを公開することを指定し、特定のファイルやディレクトリを無視するように設定しています。
また、すべてのリクエストを index.html にリライトするように指定しています。
次に、 package.json ファイルにFirebase Hosting用のスクリプトを追加します。
{
"scripts": {
"build": "next build",
"export": "next export",
"deploy": "npm run build && npm run export && firebase deploy"
}
}これで、 npm run deploy コマンドを実行するだけで、Firebase Hostingにデプロイできるようになります。
以上で、Next.jsを使ったウェブサイトやアプリケーションをデプロイして公開する方法を説明しました。
どのホスティングサービスを選んでも、Next.jsを使えば簡単にデプロイできることがわかりますね。
8. プログラミング初心者のぼっち大学生におすすめしたいNext.js本を紹介します
まとめに入る前に、Next.js初心者のぼっち大学生のみなさんに、現役エンジニアの僕がおすすめしたい書籍を何冊か紹介しておきたいと思います。
8-1. React.js&Next.js超入門 第2版
© 秀和システム
Node.jsの解説記事でも言及しましたが、この「React.js&Next.js超入門」をはじめとした掌田津耶乃さんの書籍は、全くの初心者から既に他の技術を学んでいる経験者まで、読む人を選ばない分かりやすさが最大の特徴。
「React.js&Next.js超入門」は、React.jsに関する基礎的な知識をしっかり学びつつ、Webサイト制作やWebアプリケーション開発にNext.jsを活用していきたいというぼっち大学生のみなさんに、ぜひおすすめしたい書籍となっております。
9. まとめ
今回は、プログラミング初心者のぼっち大学生向けに、Next.jsの基礎知識を解説させていただきました。
今回紹介したNext.jsのスキルは、近年のWebフロントエンドの開発現場において、求められる機会が非常に多い技術のひとつ。
かくいう僕も、特にエージェント経由の案件を探すときに、Next.jsの開発スキルが毎回大いに役立っています。
また、以前解説したJavaScriptやTypeScript、React.jsについて、ある程度学習の経験を積まれたぼっち大学生のみなさんに、ぜひ最初に学んでいただきたいJSフレームワークです。
Next.jsは、あらゆる学習プラットフォームや書籍、Webサイトなどで、初心者向けの学習コンテンツが多数提供されているフレームワークの1つ。
例えば、ぼっち大学生のみなさんが独学でNext.jsを学ぶような場合も、簡単とまでは言いませんが、とりあえず学習のためのリソースに困ることはほとんど無いでしょう。
しかし、ぼっち大学生のみなさんは、サブスク型プログラミングスクールのSAMURAI TERAKOYA（侍テラコヤ）であれば、飲み会1回分ほどの費用で、Next.jsをより効率的かつ確実に学ぶことが可能です。
SAMURAI TERAKOYA（侍テラコヤ）の詳細については、こちらの記事で解説していますが、
- 40種類以上に及ぶ学び放題の教材
- 平均回答スピード30分以内のQ&A掲示板
- 月1回〜の現役エンジニアとのオンラインレッスン
- プログラミング学習を継続できる学習ログ
を、月額2,980円〜という破格の料金で利用することができます。
Next.jsの学習に興味があり、プログラミングスクールで学ぶことも視野に入れていたが、費用面がネックとなり、なかなか学習に手を付けられなかったというぼっち大学生のみなさんは、ぜひ一度このSAMURAI TERAKOYA（侍テラコヤ）に無料で相談してみてはいかがでしょうか？
