ゼロから始めるNext.js入門：初心者向け完全ガイド
ゼロから始めるNext.js入門：初心者向け完全ガイド
Web開発の世界で人気急上昇中のNext.js。Reactをベースにしたこのフレームワークは、初心者にも優しく、高度なWebアプリケーションを構築できるパワフルなツールです。この記事では、Next.jsを初めて学ぶ方を対象に、基礎知識から実践的な開発手順、デプロイまでを網羅的に解説します。図解とコード例を豊富に使い、分かりやすさを追求しました。さあ、Next.jsの世界へ飛び込みましょう！
Part 1: 基礎知識 - Web 開発の仕組みとReact
Web アプリケーションを開発するには、まず Web の基本的な仕組みを理解することが重要です。
1.1 Webページはどうやって表示されるの？
Webページは、HTML、CSS、JavaScriptという3つの主要技術で構成されています。
HTML (HyperText Markup Language): ページの構造を定義します。見出し、段落、画像などの要素を配置するための骨組みを提供します。
CSS (Cascading Style Sheets): ページの見た目（スタイル）を定義します。色、フォント、レイアウトなどを指定します。
JavaScript: ページに動きを加えます。ボタンのクリック、アニメーション、データの取得など、インタラクティブな機能を実現します。
ブラウザは、サーバーから送られてきたHTMLファイルを解析し、DOM（Document Object Model）と呼ばれるツリー構造を構築します。このDOMを元に、CSSで定義されたスタイルを適用し、JavaScriptで動きを加えて、最終的にWebページを表示します。
1.2 JavaScriptとDOM操作
JavaScriptを使ってDOMを操作することで、Webページに動的な要素を追加できます。例えば、ボタンをクリックしたらテキストの内容が変わる、といった機能を実装できます。
// ボタン要素を取得
const button = document.getElementById('myButton');
// ボタンがクリックされたら実行される関数を定義
function changeText() {
// テキスト要素を取得
const text = document.getElementById('myText');
// テキストの内容を変更
text.textContent = 'ボタンがクリックされました！';
}
// ボタンにクリックイベントリスナーを追加
button.addEventListener('click', changeText);1.3 React: UI構築をもっと簡単に
従来のJavaScriptによるDOM操作は、コードが複雑になりがちで、管理が難しくなるという課題がありました。Reactはこの課題を解決するために生まれたJavaScriptライブラリです。
Reactでは、コンポーネントと呼ばれる再利用可能なUIパーツを作成し、それらを組み合わせてWebページを構築します。コンポーネントは、HTMLのような構文であるJSXを使って記述します。
// MyComponentというコンポーネントを定義
function MyComponent() {
return (
<h1>Hello, React!</h1>
);
}
// コンポーネントをDOMにレンダリング
const root = document.getElementById('root');
ReactDOM.render(<MyComponent />, root);Reactを使うことで、UIの構築がよりシンプルで効率的になります。さらに、コンポーネントの再利用性が高まるため、コードの保守性も向上します。
Part 2: Next.jsの登場！
2.1 Next.jsとは？
Next.jsは、ReactをベースにしたWebアプリケーションフレームワークです。React単体でWebアプリを作るよりも、さらに開発を効率化するための様々な機能を提供します。
ルーティング: URLとページの対応付けを自動的に行ってくれます。ファイルシステムベースのルーティングにより、`pages`ディレクトリにファイルを追加するだけで新しいページを作成できます。
データフェッチ: サーバーサイドでデータを取得し、ページに埋め込むことができます。`getStaticProps`や`getServerSideProps`といった関数を使うことで、データ取得のタイミングを制御できます。
プリレンダリング: ページのHTMLを事前に生成することで、SEOとパフォーマンスを向上させます。静的サイト生成 (SSG) とサーバーサイドレンダリング (SSR) の両方に対応しています。
API Routes: サーバーレス関数を作成して、APIエンドポイントを簡単に構築できます。`pages/api`ディレクトリにファイルを追加するだけで、APIルートを作成できます。
組み込みCSSサポート: CSS ModulesやSassなどのCSSプリプロセッサを簡単に使用できます。
高速な開発環境: Fast Refreshにより、コードの変更が即座にブラウザに反映されます。
簡単なデプロイ: Vercelなどのプラットフォームに簡単にデプロイできます。
2.2 Next.jsプロジェクトの作成
Next.jsプロジェクトは、`create-next-app`コマンドを使って簡単に作成できます。
npx create-next-app my-next-app
cd my-next-app
npm run devこれだけで、開発サーバーが起動し、`http://localhost:3000`でNext.jsアプリを確認できます。
2.3 ページの作成とルーティング
Next.jsでは、`pages`ディレクトリ配下のファイルが、自動的にルーティングと紐づけられます。例えば、`pages/index.js`はルートパス(`/`)に対応し、`pages/about.js`は`/about`パスに対応します。
// pages/index.js
function HomePage() {
return (
<h1>Welcome to My Next.js App!</h1>
);
}
export default HomePage;2.4 コンポーネントとJSX
Next.jsでは、Reactと同様にコンポーネントとJSXを使ってUIを構築します。コンポーネントは再利用可能なUIパーツであり、JSXはHTMLのような構文でコンポーネントを記述するためのものです。
// components/MyComponent.js
function MyComponent() {
return (
<div>
<h2>This is a component!</h2>
</div>
);
}
export default MyComponent;他のコンポーネントから`MyComponent`をインポートして使用できます。
// pages/index.js
import MyComponent from '../components/MyComponent';
function HomePage() {
return (
<div>
<h1>Welcome to My Next.js App!</h1>
<MyComponent />
</div>
);
}
export default HomePage;Part 3: スタイルとアセット
3.1 CSS Modules
Next.jsでは、CSS Modulesを使ってコンポーネントレベルでスタイルを適用できます。CSS Modulesを使うと、クラス名の衝突を気にせずにCSSを記述できます。
`styles`ディレクトリに`.module.css`拡張子のファイルを作成し、その中にCSSを記述します。
/* styles/MyComponent.module.css */
.container {
background-color: lightblue;
padding: 20px;
}コンポーネントファイルで、CSS Modulesをインポートして使用します。
// components/MyComponent.js
import styles from './MyComponent.module.css';
function MyComponent() {
return (
<div className={styles.container}>
<h2>This is a styled component!</h2>
</div>
);
}
export default MyComponent;3.2 グローバルスタイル
サイト全体に適用するグローバルスタイルは、`pages/_app.js`で設定します。
// pages/_app.js
import '../styles/globals.css';
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />;
}3.3 画像などのアセット
画像やフォントなどの静的アセットは、`public`ディレクトリに配置します。`public`ディレクトリ内のファイルは、ルートパスからアクセスできます。例えば、`public/images/logo.png`は`/images/logo.png`でアクセスできます。
Next.jsでは、`<Image>`コンポーネントを使って画像を最適化できます。`<Image>`コンポーネントは、画像の遅延読み込みやレスポンシブ対応などを自動的に行ってくれます。
Part 4: データフェッチ
Next.jsでは、様々な方法でデータを取得できます。
4.1 `getStaticProps` (静的サイト生成 - SSG)
ビルド時にデータを取得し、静的なHTMLを生成します。SEOに最適です。ブログ記事や固定ページなど、コンテンツが頻繁に変わらない場合に適しています。
// pages/posts/[id].js
export async function getStaticProps({ params }) {
const res = await fetch(`https://.../posts/${params.id}`);
const post = await res.json();
return {
props: {
post,
},
};
}
export async function getStaticPaths() {
const res = await fetch('https://.../posts');
const posts = await res.json();
const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}));
return { paths, fallback: false };
}
function Post({ post }) {
return (
<div>
<h1>{post.title}</h1>
<p>{post.content}</p>
</div>
);
}
export default Post;4.2 `getServerSideProps` (サーバーサイドレンダリング - SSR)
リクエストごとにデータを取得し、動的なHTMLを生成します。パーソナライズされたコンテンツを表示する際に便利です。ユーザー認証が必要なページや、リアルタイムデータを表示するページなどに適しています。
// pages/profile.js
export async function getServerSideProps({ req }) {
const user = getUserFromRequest(req);
return {
props: {
user,
},
};
}
function Profile({ user }) {
return (
<div>
<h1>{user.name}さんのプロフィール</h1>
{/* ... */}
</div>
);
}
export default Profile;4.3 Client-side Data Fetching (クライアントサイドデータフェッチ)
クライアントサイドでデータを取得することもできます。`useEffect`フックやSWR、React Queryなどのライブラリを使うと便利です。データが頻繁に更新される場合や、ユーザーインタラクションによってデータが変化する場合に適しています。
Part 5: デプロイ
Next.jsアプリは、VercelやNetlify、その他様々なホスティングサービスに簡単にデプロイできます。VercelはNext.jsの開発元が提供するサービスであり、Next.jsとの相性が抜群です。GitHubレポジトリと連携することで、プッシュするだけで自動的にデプロイが実行されます。
まとめ
この記事では、Next.jsの基礎知識から開発手順、デプロイまでを解説しました。Next.jsは、Reactをベースにした強力なフレームワークであり、モダンなWebアプリケーション開発に最適です。この記事が、あなたのNext.js学習の第一歩となることを願っています。
次に学ぶこと
より高度なルーティング: ダイナミックルートやネストされたルートなどを学ぶことで、複雑なアプリケーションを構築できます。
API Routesの活用: データベースとの連携や外部APIとの通信など、サーバーサイドのロジックを実装できます。
パフォーマンス最適化: 画像の最適化やキャッシングなど、パフォーマンスを向上させるためのテクニックを学ぶことで、より高速なWebアプリケーションを構築できます。
テスティング: ユニットテストや統合テストなどを実施することで、コードの品質を向上させることができます。
TypeScript: JavaScriptに型を追加することで、コードの安全性を高め、開発効率を向上させることができます。
Next.jsの公式ドキュメントや、様々なチュートリアル、ブログ記事などを参考に、さらに深くNext.jsを学んでいきましょう！
この記事が気に入ったらサポートをしてみませんか？