Next.js 和 SSR：建立高效能伺服器渲染應用程式

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 id="Welcome-to-Next-js-with-SSR">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 id="post-title">{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 id="Welcome-to-Next-js-with-SSR">Welcome to Next.js with SSR!</h1>
      <dynamiccomponent></dynamiccomponent>
    </div>
  );
}

export default Home;

7.優化圖片和資源

使用 next/image 元件最佳化圖片載入、自動壓縮和調整大小：

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

function Home() {
  return (
    <div>
      <h1 id="Welcome-to-Next-js-with-SSR">Welcome to Next.js with SSR!</h1>
      <image src="/example.jpg" alt="Example Image" width="{500}" height="{300}"></image>
    </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></component>
    </provider>
  );
}

export default MyApp;

10.優化搜尋引擎優化

Next.js 的 SSR 功能對 SEO 友好，但您也可以透過元標記對其進行最佳化：

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

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

export default Home;

11.國際化（i18n）

Next.js 10 引入了內建 i18n 支持，可以輕鬆實現多語言網站：

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

12.無伺服器模式

Next.js 支援 Serverless 模式，該模式在 Vercel 上預設為啟用。在這種模式下，您的應用程式將按需運行，從而節省資源成本。

13. 網路工作者

在 Next.js 中使用 Web Workers 處理密集型運算任務，以避免阻塞主執行緒：

// 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. 部署到 Vercel

Next.js 與 Vercel 完美整合。您只需幾個簡單的步驟即可部署它：

建立帳戶或登入 Vercel 網站。

授權 Vercel 存取您的 GitHub 或 GitLab 儲存庫。

選擇要部署的項目，Vercel 會自動偵測 Next.js 配置。

設定項目網域名稱和環境變數（如有需要）。

點擊「部署」按鈕，Vercel 將自動建置並部署應用程式。

17. 效能監控與最佳化

使用Next.js內建的Lighthouse外掛程式或Google PageSpeed Insights等第三方工具進行效能評估。根據報告優化程式碼、圖片等資源，提高載入速度和使用者體驗。

以上是Next.js 和 SSR：建立高效能伺服器渲染應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！