Rumah > Artikel > hujung hadapan web > Penguasaan Temuduga Next.js: Soalan Penting (Bahagian 6)

Penguasaan Temuduga Next.js: Soalan Penting (Bahagian 6)

Patricia Arquetteasal: 2024-11-17 17:00:02111semak imbas

Next.js Interview Mastery: Essential Questions (Part 6)

Panduan Temuduga Next.js: 100 Soalan dan Jawapan untuk Berjaya (Percuma)

Buka potensi penuh anda dalam menguasai Next.js dengan Next.js Panduan Temuduga: 100 Soalan dan Jawapan untuk Berjaya ?. Sama ada anda baru bermula sebagai pembangun atau anda seorang profesional berpengalaman yang ingin meningkatkan kemahiran anda ke peringkat seterusnya, e-buku komprehensif ini direka untuk membantu anda mengikuti temu duga Next.js dan menjadi seorang yang yakin, bersedia bekerja pemaju. Panduan ini merangkumi pelbagai topik Next.js, memastikan anda bersedia untuk sebarang soalan yang mungkin timbul. E-buku ini meneroka konsep utama seperti Perenderan Sisi Pelayan (SSR) ?, Penjanaan Tapak Statik (SSG) ) ?, Penjanaan Semula Statik Bertambah (ISR) ⏳, Penghala Apl ?️, Pengambilan Data ?, dan banyak lagi. Setiap topik diterangkan dengan teliti, menawarkan contoh dunia sebenar dan jawapan terperinci kepada soalan temu bual yang paling biasa ditanya. Selain menjawab soalan, panduan ini menyerlahkan amalan terbaik ✅ untuk mengoptimumkan aplikasi Next.js anda, meningkatkan prestasi ⚡ dan memastikan kebolehskalaan ?. Dengan Next.js yang terus berkembang, kami turut menyelami lebih dalam ciri-ciri canggih seperti React 18, Concurrent Rendering dan Suspense ?. Ini memastikan anda sentiasa dikemas kini dengan kemajuan terkini, melengkapkan anda dengan pengetahuan yang dicari oleh penemuduga. Apa yang membezakan panduan ini ialah pendekatan praktikalnya. Ia bukan sahaja merangkumi teori tetapi memberikan cerapan yang boleh diambil tindakan yang boleh anda gunakan terus pada projek anda. Keselamatan ?, pengoptimuman SEO ?, dan amalan penggunaan ?️ juga diterokai secara terperinci untuk memastikan anda bersedia untuk kitaran hayat pembangunan penuh. Sama ada anda sedang bersedia untuk temu duga teknikal di syarikat berteknologi tinggi atau ingin membina dengan lebih cekap, aplikasi berskala, panduan ini akan membantu anda mempertajam kemahiran Next.js anda dan menonjol daripada persaingan. Menjelang akhir buku ini, anda akan bersedia untuk menangani sebarang soalan temuduga Next.js dengan yakin, daripada konsep asas kepada cabaran peringkat pakar. Lengkapkan diri anda dengan pengetahuan untuk cemerlang sebagai pembangun Next.js ? dan dengan yakin melangkah ke peluang kerjaya anda yang seterusnya!

Penguasaan Temuduga Next.js: Soalan Penting (Bahagian 6)

cyroscript.gumroad.com

51. Bagaimanakah anda boleh menggunakan GraphQL dengan Next.js?

GraphQL boleh digunakan dalam Next.js untuk menanyakan kandungan daripada CMS tanpa kepala atau mana-mana titik akhir GraphQL. Next.js membolehkan anda mengambil data daripada GraphQL semasa penjanaan statik (dengan getStaticProps), pemaparan bahagian pelayan (dengan getServerSideProps) atau sisi klien (dengan cangkuk seperti Apollo Client atau URQL).

Menggunakan GraphQL dengan getStaticProps atau getServerSideProps: Anda boleh menggunakan perpustakaan seperti graphql-request atau Apollo Client untuk mengambil data GraphQL dan menyuntiknya ke dalam halaman sebagai prop.

Contoh dengan graphql-request:

import { request } from 'graphql-request';

export async function getStaticProps() {
  const query = `{
    posts {
      id
      title
      content
    }
  }`;

  const data = await request('<https:>', query);

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

</https:>

52. Bagaimanakah anda boleh menyepadukan Pelanggan Apollo dalam aplikasi Next.js?

Apollo Client ialah perpustakaan popular untuk bekerja dengan GraphQL. Ia boleh disepadukan dengan mudah ke dalam aplikasi Next.js untuk mengambil data pada kedua-dua bahagian pelayan dan klien.

Langkah-langkah untuk menyepadukan Pelanggan Apollo:

Pasang Ketergantungan:
```
npm install @apollo/client graphql
```

Sediakan Pelanggan Apollo:
Cipta fail apolloClient.js untuk mengkonfigurasi Pelanggan Apollo:

// lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({ uri: '<https:>' }),
  cache: new InMemoryCache(),
});

export default client;

</https:>

Gunakan Pelanggan Apollo dalam Halaman:
Gunakan Apollo Client dengan getStaticProps, getServerSideProps atau pada klien menggunakan cangkuk useQuery Apollo.

Contoh menggunakan getStaticProps:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import client from '../lib/apolloClient';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

export async function getStaticProps() {
  const { data } = await client.query({ query: GET_POSTS });

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
        </div>
      ))}
    </div>
  );
}

53. Bagaimanakah anda boleh melakukan ubah hala sisi pelayan dalam Next.js?

Dalam Next.js, anda boleh melakukan ubah hala sisi pelayan menggunakan ubah hala dalam getServerSideProps atau generateStaticParams untuk ubah hala peringkat halaman.

Menggunakan getServerSideProps: Jika anda perlu mengendalikan ubah hala berdasarkan syarat semasa SSR, anda boleh menggunakan kekunci ubah hala.

Contoh:

export async function getServerSideProps(context) {
  // Check some condition, like user authentication
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return {
      redirect: {
        destination: '/login',
        permanent: false, // Optional: set to true for permanent redirects
      },
    };
  }

  return {
    props: {}, // Will pass to the component
  };
}

Menggunakan next.config.js untuk Ubah Hala Global: Untuk mengendalikan ubah hala secara global, anda boleh menggunakan kekunci ubah hala dalam next.config.js untuk menyediakan peraturan untuk mengubah hala pengguna.

Contoh:

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true,
      },
    ];
  },
};

Konfigurasi ini akan mengubah hala /halaman-lama ke /halaman-baharu secara kekal apabila digunakan.

Kaedah ini membolehkan anda mengendalikan ubah hala berdasarkan kedua-dua keadaan sisi pelayan dan konfigurasi statik dalam Next.js.

54. Bagaimanakah anda menggunakan cangkuk useRouter dalam Next.js?

Kait useRouter daripada Next.js digunakan untuk mengakses objek penghala dalam komponen berfungsi. Ia menyediakan akses kepada laluan semasa, parameter pertanyaan, nama laluan dan kaedah untuk navigasi. Ia biasanya digunakan untuk mendapatkan maklumat tentang laluan semasa atau untuk menavigasi secara atur cara ke laluan lain.

Contoh penggunaan:

'use client'; // Required for client-side hooks

import { useRouter } from 'next/router';

export default function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    // Navigate programmatically to another route
    router.push('/about');
  };

  return (
    <div>
      <p>Current Path: {router.pathname}</p>
      <button onclick="{handleClick}">Go to About Page</button>
    </div>
  );
}

Sifat & Kaedah Biasa:

router.pathname: Laluan semasa halaman.
router.query: Parameter rentetan pertanyaan sebagai objek.
router.push(url): Navigasi ke URL baharu.
router.replace(url): Navigasi ke URL baharu tetapi gantikan entri semasa dalam timbunan sejarah.
router.back(): Kembali ke halaman sebelumnya.

55. Bagaimanakah anda boleh menavigasi secara pemrograman dalam Next.js?

Anda boleh menavigasi secara pemrograman dalam Next.js menggunakan cangkuk useRouter atau komponen Pautan.

Menggunakan cangkuk useRouter:
Kaedah router.push() boleh digunakan untuk menavigasi ke halaman baharu secara pemrograman.

Contoh:

import { request } from 'graphql-request';

export async function getStaticProps() {
  const query = `{
    posts {
      id
      title
      content
    }
  }`;

  const data = await request('<https:>', query);

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

</https:>

Menggunakan komponen Pautan (untuk navigasi deklaratif):
```
npm install @apollo/client graphql
```
Menggunakan router.replace():
Jika anda ingin menavigasi tanpa menambah halaman baharu pada timbunan sejarah penyemak imbas, gunakan router.replace().

56. Apakah next-i18next, dan bagaimanakah ia digunakan dalam Next.js?

next-i18next ialah perpustakaan popular yang menyediakan sokongan pengantarabangsaan (i18n) untuk Next.js. Ia membantu mengurus terjemahan untuk berbilang bahasa dan memudahkan proses menyediakan penyetempatan.

Langkah untuk menggunakan next-i18next:

Pasang pakej:

// lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({ uri: '<https:>' }),
  cache: new InMemoryCache(),
});

export default client;

</https:>

Konfigurasikan next-i18next:
Dalam next.config.js, konfigurasikan tempat yang disokong dan bahasa lalai.

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import client from '../lib/apolloClient';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

export async function getStaticProps() {
  const { data } = await client.query({ query: GET_POSTS });

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
        </div>
      ))}
    </div>
  );
}

Buat fail terjemahan:
Dalam projek anda, buat folder yang dipanggil public/locales dan tambahkan fail JSON untuk setiap bahasa.

export async function getServerSideProps(context) {
  // Check some condition, like user authentication
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return {
      redirect: {
        destination: '/login',
        permanent: false, // Optional: set to true for permanent redirects
      },
    };
  }

  return {
    props: {}, // Will pass to the component
  };
}

Gunakan terjemahan dalam komponen:
Gunakan cangkuk useTranslation yang disediakan oleh next-i18next untuk mendapatkan terjemahan.

// next.config.js
module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true,
      },
    ];
  },
};

57. Bagaimanakah anda melaksanakan penyetempatan dalam Next.js?

Penyetempatan dalam Next.js boleh dilaksanakan menggunakan next-i18next, yang mengendalikan terjemahan kandungan apl anda. Berikut ialah panduan ringkas:

Sediakan next-i18next seperti yang dinyatakan dalam soalan 74.

Buat fail khusus bahasa:
Setiap bahasa akan mempunyai fail terjemahannya sendiri dalam direktori awam/tempatan. Contohnya, untuk bahasa Inggeris dan Sepanyol:

'use client'; // Required for client-side hooks

import { useRouter } from 'next/router';

export default function MyComponent() {
  const router = useRouter();

  const handleClick = () => {
    // Navigate programmatically to another route
    router.push('/about');
  };

  return (
    <div>
      <p>Current Path: {router.pathname}</p>
      <button onclick="{handleClick}">Go to About Page</button>
    </div>
  );
}

Akses terjemahan menggunakan useTranslation:
Gunakan cangkuk useTranslation untuk mengakses terjemahan dalam mana-mana komponen.

import { useRouter } from 'next/router';

function NavigateButton() {
  const router = useRouter();

  const handleNavigation = () => {
    router.push('/new-page'); // Navigates to a new page
  };

  return <button onclick="{handleNavigation}">Go to New Page</button>;
}

Sediakan penukaran bahasa:
Anda boleh menyediakan penukar bahasa untuk membolehkan pengguna bertukar antara bahasa.

import { request } from 'graphql-request';

export async function getStaticProps() {
  const query = `{
    posts {
      id
      title
      content
    }
  }`;

  const data = await request('<https:>', query);

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

</https:>

58. Apakah next-seo, dan bagaimana ia digunakan dalam Next.js?

next-seo ialah perpustakaan yang memudahkan penambahan metadata SEO pada aplikasi Next.js anda. Ia menyediakan satu set komponen dan fungsi utiliti untuk mengurus metadata SEO seperti tajuk, penerangan dan teg Graf Terbuka.

Langkah untuk menggunakan next-seo:

Pasang pakej:
```
npm install @apollo/client graphql
```

Tambahkan metadata SEO pada halaman anda:
Anda boleh menggunakan komponen NextSeo untuk menambah tag meta SEO pada setiap halaman.

// lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({ uri: '<https:>' }),
  cache: new InMemoryCache(),
});

export default client;

</https:>

Tetapan SEO Global:
Anda boleh mengkonfigurasi tetapan SEO global dalam pages/_document.js untuk menggunakan tetapan SEO lalai pada semua halaman.

59. Bagaimanakah anda boleh menambah Google Analitis pada projek Next.js?

Untuk menambahkan Google Analitis pada projek Next.js anda, anda boleh menggunakan komponen seterusnya/skrip untuk memasukkan skrip Google Analitis ke dalam

halaman anda.

Langkah:

Buat akaun Google Analitis dan dapatkan ID penjejakan (cth., UA-XXXXXX-X).
Pasang komponen seterusnya/skrip (ini terbina dalam Next.js).
Tambahkan skrip Google Analitis dalam halaman/_document.js anda atau dalam komponen Head next/head.

Contoh:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import client from '../lib/apolloClient';

const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
    }
  }
`;

export async function getStaticProps() {
  const { data } = await client.query({ query: GET_POSTS });

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
        </div>
      ))}
    </div>
  );
}

Nota:

Ganti 'YOUR_TRACKING_ID' dengan ID penjejakan Google Analitis anda yang sebenar.
Jika anda ingin menjejak paparan halaman dan acara lain, anda boleh menggunakan gtag('event', ...) dalam kod aplikasi anda.

59. Apakah perbezaan antara SSR dan CSR dalam Next.js?

SSR (Rendering Sebelah Pelayan) dan CSR (Rendering Sebelah Pelanggan) ialah dua kaedah pemaparan berbeza dalam Next.js.

SSR (Perenderan Sebelah Pelayan):
Dalam SSR, halaman pra-diberikan pada pelayan semasa permintaan. Ini bermakna HTML dijana pada pelayan, dan halaman yang dipaparkan sepenuhnya dihantar kepada klien. SSR berguna untuk halaman yang perlu menunjukkan kandungan dinamik dan perlu diindeks oleh enjin carian atau memerlukan pemuatan halaman awal yang cepat.
- Cara menggunakan SSR dalam Next.js: Gunakan getServerSideProps dalam Penghala Apl untuk mengambil bahagian pelayan data bagi setiap permintaan.
```
export async function getServerSideProps(context) {
  // Check some condition, like user authentication
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return {
      redirect: {
        destination: '/login',
        permanent: false, // Optional: set to true for permanent redirects
      },
    };
  }

  return {
    props: {}, // Will pass to the component
  };
}
```
CSR (Perenderan Sebelah Pelanggan):
Dalam CSR, halaman dipaparkan sepenuhnya pada sisi pelanggan. HTML awal yang disampaikan daripada pelayan adalah minimum (biasanya hanya rangka atau halaman pemuatan), dan JavaScript bertanggungjawab untuk memaparkan kandungan. CSR berguna untuk aplikasi yang kandungannya kerap berubah berdasarkan interaksi pengguna.
- Cara menggunakan CSR dalam Next.js: Anda boleh mengambil data pada bahagian klien menggunakan cangkuk React, cth., useEffect dengan Axios atau SWR untuk pengambilan data pihak klien.

60. Bagaimanakah anda boleh menjadikan aplikasi Next.js serasi dengan PWA?

Untuk menjadikan aplikasi Next.js Progressive Web App (PWA) serasi, anda perlu menggunakan pekerja perkhidmatan, fail manifes dan mengkonfigurasi apl anda supaya boleh dipasang.

Pasang PWA Plugin:
Gunakan pemalam next-pwa untuk menyediakan PWA dengan mudah dalam Next.js.

import { request } from 'graphql-request';

export async function getStaticProps() {
  const query = `{
    posts {
      id
      title
      content
    }
  }`;

  const data = await request('<https:>', query);

  return {
    props: {
      posts: data.posts,
    },
  };
}

export default function PostsPage({ posts }) {
  return (
    <div>
      {posts.map(post => (
        <div key="{post.id}">
          <h2>{post.title}</h2>
          <p>{post.content}</p>
        </div>
      ))}
    </div>
  );
}

</https:>

Konfigurasikan next-pwa dalam next.config.js:
```
npm install @apollo/client graphql
```

Tambah Fail Manifes:
Buat manifest.json dalam direktori awam/ untuk ikon apl anda, warna tema dan sifat lain:

// lib/apolloClient.js
import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client';

const client = new ApolloClient({
  link: new HttpLink({ uri: '<https:>' }),
  cache: new InMemoryCache(),
});

export default client;

</https:>

Tambah Pekerja Perkhidmatan:

Pemalam next-pwa secara automatik menjana pekerja perkhidmatan dan mengendalikan caching untuk sokongan luar talian.

Atas ialah kandungan terperinci Penguasaan Temuduga Next.js: Soalan Penting (Bahagian 6). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript graphql json html edge Static String Object if switch for date Directory using public Event JS default this history web app cms Access SEO excel router axios

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana dengan Cekap Menukar Blob daripada Borang HTML kepada Rentetan Base64?Artikel seterusnya：Bagaimana dengan Cekap Menukar Blob daripada Borang HTML kepada Rentetan Base64?

Artikel berkaitan

Lihat lagi