検索

ホームページ >ウェブフロントエンド >jsチュートリアル >Next.js の概要: 初めてのアプリケーションの構築

Next.js の概要: 初めてのアプリケーションの構築

Susan Sarandon
Susan Sarandonオリジナル
2024-10-18 22:44:30404ブラウズ

Next.js は、開発者がサーバーでレンダリングされる高速なアプリケーションを作成できるようにする人気の React フレームワークです。静的サイト生成 (SSG)、サーバー側レンダリング (SSR)、API ルートなど、すぐに使用できる強力な機能を提供します。このガイドでは、主要な概念と実践的な例に焦点を当てて、最初の Next.js アプリケーションを構築するプロセスを順を追って説明します。

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

Next.js を使い始めるには、マシンに Node.js がインストールされている必要があります。 Node.js をセットアップしたら、次のコマンドを使用して新しい Next.js アプリケーションを作成できます:

npx create-next-app my-next-app

このコマンドは、Next.js アプリケーションを開始するために必要なすべてのファイルと依存関係を含む、my-next-app という新しいディレクトリを作成します。

2. プロジェクト構造内の移動

プロジェクトを作成した後、プロジェクト ディレクトリに移動します。

cd my-next-app

my-next-app ディレクトリ内に、次のような構造があります。

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

pages ディレクトリはアプリケーションのページを作成する場所であり、public は静的アセット用です。

3. 最初のページの作成

Next.js はファイルベースのルーティング システムを使用します。新しいページを作成するには、新しい JavaScript ファイルをページ ディレクトリ内に追加するだけです。たとえば、about.js:
という名前のファイルを作成します。 

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

この例では、単純な About ページを作成し、Link コンポーネントを使用してホーム ページに戻ります。

4. ホームページの変更

pages ディレクトリにあるindex.js ファイルを開きます。このファイルはアプリケーションのホームページを表します。次のように変更できます:

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

ここでは、簡単なスタイルと About ページへのリンクを追加しました。

5. アプリケーションへのスタイルの追加

Next.js は、すぐに CSS モジュールをサポートします。コンポーネントのスタイルを設定するには、styles ディレクトリに CSS モジュールを作成します。たとえば、Home.module.css:
という名前のファイルを作成します。 

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

次に、前のセクションで示したように、この CSS モジュールをindex.js ページにインポートします。

6. Next.js を使用したデータの取得

Next.js を使用すると、静的サイト生成の場合は getStaticProps を使用し、サーバーサイド レンダリングの場合は getServerSideProps を使用してデータを簡単に取得できます。たとえば、ホームページ上のデータを取得するには、index.js を次のように変更します。

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

このコードでは、パブリック API から投稿のリストを取得し、ホームページに表示します。

7. APIルートの作成

Next.js を使用すると、pages/api ディレクトリに API ルートを作成できます。これらのルートを使用して、バックエンド機能を構築できます。たとえば、pages/api ディレクトリに hello.js という名前のファイルを作成します。

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API!' });
}

この API ルートにアクセスするには、http://localhost:3000/api/hello に移動します。

8. Next.js アプリケーションのデプロイ

アプリケーションの準備が完了したら、簡単にデプロイできます。 Vercel は、Next.js アプリケーションに推奨されるホスティング プラットフォームです。次の手順に従ってアプリをデプロイできます:

  1. Vercel アカウントをお持ちでない場合は、作成してください。

  2. Vercel CLI をグローバルにインストールします:

    npx create-next-app my-next-app

  3. プロジェクト ディレクトリで次のコマンドを実行します:

    cd my-next-app

  4. プロンプトに従ってアプリケーションをデプロイします。

9. 動的ルーティングの追加

Next.js は、括弧を使用した動的ルーティングをサポートしています。たとえば、動的なブログ投稿ページを作成する場合は、pages/posts ディレクトリに [id].js という名前のファイルを作成できます。

my-next-app/
├── node_modules/
├── pages/
│   ├── api/
│   ├── _app.js
│   ├── index.js
├── public/
├── styles/
│   ├── Home.module.css
├── package.json
└── README.md

/posts/1、/posts/2 などに移動して、特定の投稿にアクセスできるようになりました。

10. グローバル スタイルの実装

アプリケーションにグローバル スタイルを適用したい場合は、pages ディレクトリに _app.js という名前のファイルを作成することで実行できます。

// pages/about.js
import Link from 'next/link';

export default function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page of my first Next.js application!</p>
      <Link href="/">Go back home</Link>
    </div>
  );
}

次に、styles ディレクトリに globals.css ファイルを作成し、グローバル スタイルを追加します。

// pages/index.js
import Link from 'next/link';
import styles from '../styles/Home.module.css';

export default function Home() {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <p>
        This is my first application built with Next.js.{' '}
        <Link href="/about">Learn more about me</Link>
      </p>
    </div>
  );
}

11. 環境変数の使用

Next.js は、機密情報を保存するための環境変数をサポートしています。プロジェクトのルートに .env.local ファイルを作成し、変数を追加できます:

/* styles/Home.module.css */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

その後、process.env:
を使用してアプリケーションでこの変数にアクセスできます。 

// pages/index.js
export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return {
    props: { posts },
  };
}

export default function Home({ posts }) {
  return (
    <div className={styles.container}>
      <h1>Welcome to My Next.js App</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

最初の Next.js アプリケーションの構築おめでとうございます!この旅を通じて、プロジェクトのセットアップ、動的ページの作成、データのシームレスな取得、堅牢なルーティングの実装、アプリケーションの簡単なデプロイ方法を学びました。

Next.js は単なるフレームワークではありません。これは、Web 開発エクスペリエンスを大幅に向上させる強力なツールです。静的サイト生成 (SSG) やサーバーサイド レンダリング (SSR) などの組み込み機能により、パフォーマンスと SEO に最適化された、高速でユーザー フレンドリーなアプリケーションを作成できます。

Next.js の旅の次のステップ

最初の Next.js アプリケーションの構築に成功したので、スキルを次のレベルに引き上げましょう。この今後の投稿シリーズでは、アプリケーションを強化し、開発プロセスを合理化できる Next.js のより高度な機能のいくつかをさらに詳しく掘り下げていきます。

ミドルウェア は、リクエストが完了する前にカスタム ロジックを追加することでアプリケーションの機能を拡張できる強力な機能です。これは、リクエストとレスポンスのオブジェクトを操作したり、ユーザーを認証したり、リダイレクトをシームレスに管理したりできることを意味します。

次に、静的サイト生成 (SSG) について説明します。この手法により、ビルド時にページが事前レンダリングされるため、読み込み速度が速くなり、SEO パフォーマンスが向上します。 SSG の活用方法を理解することで、動的であるだけでなく、驚くほど効率的なアプリケーションを作成できます。

最後に、Next.js アプリケーション内でサーバーレス関数を直接構築できる機能である API ルート について説明します。これは、別のサーバーを必要とせずにリクエストとレスポンスを処理できることを意味し、より少ないオーバーヘッドでフルスタック アプリケーションの開発が容易になります。

Next.js の高度な機能へのこのエキサイティングな旅に乗り出す私に従ってください。これらのツールを自由に使えば、本当に優れた堅牢で高性能なアプリケーションを構築できます。次回の投稿もお楽しみに!

この投稿は次の場所でも読むことができます:

Introduction to Next.js: Building Your First Application

Next.js の概要: 初めてのアプリケーションの構築

Next.js は、開発者がサーバーでレンダリングされる高速なアプリケーションを作成できるようにする人気の React フレームワークです。すぐに使える強力な機能を提供します。

Introduction to Next.js: Building Your First Application salmanyad.hashnode.dev

次の場所で私を見つけてください:

Introduction to Next.js: Building Your First Application

サルマンイヤド · GitHub

コンピュータシステムエンジニア |ウェブ開発者。 SalmanIyad には 31 のリポジトリが利用可能です。 GitHub でコードをフォローしてください。

Introduction to Next.js: Building Your First Application github.com

以上がNext.js の概要: 初めてのアプリケーションの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript css less Static if for while Directory using public finally JS this display github serverless http Access SEO
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Node.js のイベント ループ: 非同期操作の管理次の記事：Node.js のイベント ループ: 非同期操作の管理

関連記事

続きを見る