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 チュートリアル

1664

CakePHP チュートリアル

1422

Laravel チュートリアル

1316

PHP チュートリアル

1267

C# チュートリアル

1239

Related knowledge

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptの進化：現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptエンジン：実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

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

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

JavaScript：Web言語の汎用性の調査 Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1）フロントエンド開発：DOM操作と最新のフレームワーク（React、Vue.JS、Angularなど）を通じて、動的なWebページとシングルページアプリケーションを構築します。 2）サーバー側の開発：node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3）モバイルおよびデスクトップアプリケーション開発：クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法（フロントエンド統合） Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

next.jsを使用してマルチテナントSaaSアプリケーションを構築する（バックエンド統合） Apr 11, 2025 am 08:23 AM

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション（EDTECHアプリ）を作成しましたが、あなたは同じことをすることができます。まず、マルチテナントSaaSアプリケーションとは何ですか？マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

C/CからJavaScriptへ：すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

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版

ホットトピック