Next.js dan SSR: Membina aplikasi yang diberikan pelayan berprestasi tinggi

1. Buat projek

Buat projek Next.js baharu dengan perancah create-next-app:

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

2. SSR automatik

Dalam Next.js, setiap komponen fail .js atau .jsx akan diproses secara automatik sebagai halaman SSR. Contohnya, buat fail 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;

Jalankan npm run dev untuk memulakan pelayan pembangunan, lawati http://localhost:3000, dan anda akan mendapati bahawa HTML sudah mengandungi kandungan yang diberikan pelayan.

3. Penghalaan dinamik dan pemerolehan data

Next.js menyokong penghalaan dinamik, seperti halaman/siaran/[id].js. Dapatkan data dalam getStaticPaths dan getStaticProps atau 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. Pengoptimuman statik dan pra-penyampaian

Next.js juga menyokong pengoptimuman statik dan prapemarahan (Penjanaan Tapak Statik, SSG). Konfigurasikan dalam getStaticPaths dan 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. Import dinamik dan pemisahan kod

Next.js menyokong import dinamik, yang membantu memuatkan kod atas permintaan dan mengurangkan masa pemuatan awal:

// 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. Optimumkan imej dan sumber

Gunakan komponen seterusnya/imej untuk mengoptimumkan pemuatan imej, pemampatan automatik dan saiz semula:

// 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. Pelayan Tersuai

Jika anda memerlukan kawalan yang lebih terperinci, anda boleh membuat pelayan tersuai:

// 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. Mengintegrasikan perpustakaan dan rangka kerja pihak ketiga

Next.js membolehkan anda menyepadukan perpustakaan dan rangka kerja pihak ketiga dengan mudah, seperti Redux, MobX, Apollo, dsb.:

// 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. Optimumkan SEO

Ciri SSR Next.js mesra SEO, tetapi anda juga boleh mengoptimumkannya melalui tag meta:

// 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. Pengantarabangsaan (i18n)

Next.js 10 memperkenalkan sokongan i18n terbina dalam, menjadikannya mudah untuk melaksanakan tapak web berbilang bahasa:

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

12. Mod tanpa pelayan

Next.js menyokong mod Tanpa Pelayan, yang didayakan secara lalai pada Vercel. Dalam mod ini, aplikasi anda akan dijalankan atas permintaan, menjimatkan kos sumber.

13. Pekerja Web

Gunakan Pekerja Web dalam Next.js untuk mengendalikan tugas pengkomputeran intensif untuk mengelak daripada menyekat urutan utama:

// 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. Penyepaduan TypeScript

Next.js menyokong TypeScript, menambahkan keselamatan jenis pada projek anda:

Pasang skrip taip dan @types/react.

Buat fail konfigurasi tsconfig.json.

Ubah suai next.config.js untuk mendayakan sokongan TypeScript.

15. Halaman Ralat Tersuai

Buat halaman/_error.js halaman ralat tersuai:

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

16. Sebarkan ke Vercel

Next.js disepadukan dengan sempurna dengan Vercel. Anda boleh menggunakan ia hanya dalam beberapa langkah mudah:

Buat akaun atau log masuk di tapak web Vercel.

Izinkan Vercel untuk mengakses repositori GitHub atau GitLab anda.

Pilih projek untuk digunakan dan Vercel akan mengesan konfigurasi Next.js secara automatik.

Tetapkan nama domain projek dan pembolehubah persekitaran (jika perlu).

Klik butang "Kerahkan" dan Vercel akan membina dan menggunakan aplikasi secara automatik.

17. Pemantauan dan pengoptimuman prestasi

Gunakan pemalam Lighthouse terbina dalam Next.js atau alat pihak ketiga seperti Google PageSpeed ​​​​Insights untuk penilaian prestasi. Optimumkan kod, imej dan sumber lain berdasarkan laporan untuk meningkatkan kelajuan pemuatan dan pengalaman pengguna.

Atas ialah kandungan terperinci Next.js dan SSR: Membina aplikasi yang diberikan pelayan berprestasi tinggi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!