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

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

Susan Sarandon

リリース： 2024-12-31 12:02:17

オリジナル

882 人が閲覧しました

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 サイトの他の関連記事を参照してください。