Next.js と SSR: サーバーでレンダリングされる高性能アプリケーションの構築-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

Next.js と SSR: サーバーでレンダリングされる高性能アプリケーションの構築

Susan Sarandon

Dec 31, 2024 pm 12:02 PM

Next.js and SSR: Building high-performance server-rendered applications

1. プロジェクトを作成する

create-next-app スキャフォールドを使用して新しい Next.js プロジェクトを作成します。

npx create-next-app my-app
cd my-app

ログイン後にコピー

2.自動SSR

Next.js では、.js または .jsx ファイルの各コンポーネントが SSR ページとして自動的に処理されます。たとえば、pages/index.js ファイルを作成します:

// pages/index.js
import React from 'react';

function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with SSR!</h1>
      <p>This is rendered on the server.</p>
    </div>
  );
}

export default Home;

ログイン後にコピー

npm run dev を実行して開発サーバーを起動し、http://localhost:3000 にアクセスすると、HTML にサーバーでレンダリングされたコンテンツがすでに含まれていることがわかります。

3. 動的ルーティングとデータ取得

Next.js は、pages/posts/[id].js などの動的ルーティングをサポートしています。 getStaticPaths と getStaticProps または getServerSideProps でデータを取得します:

// pages/posts/[id].js
import { useRouter } from 'next/router';
import { getPostById } from '../lib/api'; // Custom API to obtain data

export async function getServerSideProps(context) {
  const id = context.params.id;
  const post = await getPostById(id);

  return {
    props: {
      post,
    },
  };
}

function Post({ post }) {
  const router = useRouter();
  if (!router.isFallback && !post) {
    router.push('/404');
    return null;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

export default Post;

ログイン後にコピー

4. 静的最適化とプリレンダリング

Next.js は、静的最適化とプリレンダリング (静的サイト生成、SSG) もサポートしています。 getStaticPaths と getStaticProps で設定します:

// pages/posts/[id].js
export async function getStaticPaths() {
  // Get all possible dynamic paths
  const paths = await getPostIds();

  return {
    paths: paths.map((id) => `/posts/${id}`),
    fallback: false, // Or 'true' to return 404 for non-prerendered paths
  };
}

export async function getStaticProps(context) {
  const id = context.params.id;
  const post = await getPostById(id);

  return {
    props: {
      post,
    },
  };
}

ログイン後にコピー

6. 動的なインポートとコード分割

Next.js は動的インポートをサポートしています。これにより、コードをオンデマンドでロードし、初期読み込み時間を短縮できます。

// pages/index.js
import dynamic from 'next/dynamic';

const DynamicComponent = dynamic(() => import('../components/Dynamic'), {
  ssr: false, // Avoid rendering on the server
});

function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with SSR!</h1>
      <DynamicComponent />
    </div>
  );
}

export default Home;

ログイン後にコピー

7. 画像とリソースを最適化する

next/image コンポーネントを使用して、画像の読み込み、自動圧縮、サイズ変更を最適化します。

// pages/index.js
import Image from 'next/image';

function Home() {
  return (
    <div>
      <h1>Welcome to Next.js with SSR!</h1>
      <Image src="/example.jpg" alt="Example Image" width={500} height={300} />
    </div>
  );
}

export default Home;

ログイン後にコピー

8. カスタムサーバー

よりきめ細かい制御が必要な場合は、カスタムサーバーを作成できます。

// server.js
const { createServer } = require('http');
const { parse } = require('url');
const next = require('next');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true);
    const { pathname } = parsedUrl;

    if (pathname === '/api') {
      // Custom API route handling
      // ...
    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(3000, (err) => {
    if (err) throw err;
    console.log('> Ready on http://localhost:3000');
  });
});

ログイン後にコピー

9. サードパーティのライブラリとフレームワークを統合する

Next.js を使用すると、Redux、MobX、Apollo などのサードパーティのライブラリとフレームワークを簡単に統合できます。

// pages/_app.js
import React from 'react';
import App from 'next/app';
import { Provider } from 'react-redux';
import store from '../store';

function MyApp({ Component, pageProps }) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  );
}

export default MyApp;

ログイン後にコピー

10. SEOを最適化する

Next.js の SSR 機能は SEO に適していますが、メタタグを通じて最適化することもできます:

// pages/index.js
import Head from 'next/head';

function Home() {
  return (
    <>
      <Head>
        <title>My Next.js App</title>
        <meta name="description" content="This is an example of using Next.js with SEO." />
      </Head>
      <h1>Welcome to Next.js with SEO!</h1>
    </>
  );
}

export default Home;

ログイン後にコピー

11. 国際化 (i18n)

Next.js 10 では組み込みの i18n サポートが導入され、多言語 Web サイトの実装が容易になります。

// next.config.js
module.exports = {
  i18n: {
    locales: ['en', 'fr'],
    defaultLocale: 'en',
  },
};

ログイン後にコピー

12. サーバーレスモード

Next.js はサーバーレスモードをサポートしており、Vercel ではデフォルトで有効になっています。このモードでは、アプリケーションがオンデマンドで実行され、リソースコストが節約されます。

13. ウェブワーカー

Next.js で Web ワーカーを使用して集中的なコンピューティングタスクを処理し、メインスレッドのブロックを回避します。

// components/Worker.js
import { useEffect } from 'react';
import { createWorker } from 'workerize-loader!./my-worker.js'; // Use workerize-loader to load worker files

function MyComponent() {
  const worker = createWorker();

  useEffect(() => {
    const result = worker.calculate(100000); // Calling worker methods
    result.then(console.log);
    return () => worker.terminate(); // Cleaning up workers
  }, []);

  return <div>Loading...</div>;
}

export default MyComponent;

ログイン後にコピー

14. TypeScript の統合

Next.js は TypeScript をサポートし、プロジェクトにタイプセーフティを追加します:

typescript と @types/react をインストールします。

tsconfig.json 構成ファイルを作成します。

next.config.js を変更して TypeScript サポートを有効にします。

15. カスタムエラーページ

pages/_error.js カスタムエラーページを作成します:

npx create-next-app my-app
cd my-app

ログイン後にコピー

16. ヴェルセルへの展開

Next.js は Vercel と完全に統合されています。いくつかの簡単な手順でデプロイできます。

アカウントを作成するか、Vercel Web サイトにログインします。

Vercel に GitHub または GitLab リポジトリへのアクセスを許可します。

デプロイするプロジェクトを選択すると、Vercel が Next.js 構成を自動的に検出します。

プロジェクトのドメイン名と環境変数を設定します (必要な場合)。

[デプロイ] ボタンをクリックすると、Vercel がアプリケーションを自動的にビルドしてデプロイします。

17. パフォーマンスの監視と最適化

パフォーマンス評価には、Next.js の組み込み Lighthouse プラグイン、または Google PageSpeed Insights などのサードパーティツールを使用します。レポートに基づいてコード、画像、その他のリソースを最適化し、読み込み速度とユーザーエクスペリエンスを向上させます。

以上がNext.js と SSR: サーバーでレンダリングされる高性能アプリケーションの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Java チュートリアル

1673

CakePHP チュートリアル

1429

Laravel チュートリアル

1333

PHP チュートリアル

1278

C# チュートリアル

1257

Related knowledge

Python vs. JavaScript：学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

JavaScriptとWeb：コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action：実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解：実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript：開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScript通訳者とコンパイラにおけるC/Cの役割 Apr 20, 2025 am 12:01 AM

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1）cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2）Cは、Bytecodeの生成と実行を担当します。 3）Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。

Python vs. JavaScript：ユースケースとアプリケーションと比較されます Apr 21, 2025 am 12:01 AM

Pythonはデータサイエンスと自動化により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、データ処理とモデリングのためにNumpyやPandasなどのライブラリを使用して、データサイエンスと機械学習でうまく機能します。 2。Pythonは、自動化とスクリプトにおいて簡潔で効率的です。 3. JavaScriptはフロントエンド開発に不可欠であり、動的なWebページと単一ページアプリケーションの構築に使用されます。 4. JavaScriptは、node.jsを通じてバックエンド開発において役割を果たし、フルスタック開発をサポートします。

See all articles

Next.js と SSR: サーバーでレンダリングされる高性能アプリケーションの構築

1. プロジェクトを作成する

2.自動SSR

3. 動的ルーティングとデータ取得

4. 静的最適化とプリレンダリング

6. 動的なインポートとコード分割

7. 画像とリソースを最適化する

8. カスタムサーバー

9. サードパーティのライブラリとフレームワークを統合する

10. SEOを最適化する

11. 国際化 (i18n)

12. サーバーレスモード

13. ウェブワーカー

14. TypeScript の統合

15. カスタムエラーページ

16. ヴェルセルへの展開

17. パフォーマンスの監視と最適化

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック