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

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!

Nyatakan saiz: Sentiasa nyatakan atribut lebar dan ketinggian untuk imej untuk mengelakkan peralihan reka letak.

Imej muat malas: Secara lalai, imej dimuatkan malas, bermakna ia hanya dimuatkan apabila ia kelihatan dalam port pandangan. Ini meningkatkan prestasi.

Gunakan pembekal imej luaran: Jika anda menggunakan CDN imej luaran (seperti Cloudinary atau Imgix), konfigurasikan Next.js untuk menyokongnya dalam next.config.js:

module.exports = {
  images: {
    domains: ['example.com', 'cdn.example.com'],
  },
};

Imej responsif: Gunakan saiz untuk menentukan saiz imej yang berbeza untuk paparan yang berbeza.

69. Bagaimanakah anda boleh mengendalikan pengesahan pengguna dengan JWT dalam Next.js?

Untuk mengendalikan pengesahan pengguna dengan JWT (Token Web JSON) dalam Next.js, anda biasanya mengikuti langkah berikut:

1. Simpan JWT: Selepas log masuk, simpan JWT dalam kuki atau localStorage.
   • Kuki ialah kaedah pilihan untuk menyimpan token kerana ia dihantar secara automatik dengan setiap permintaan.

2. Tetapkan JWT dalam pengepala HTTP: Untuk permintaan API, hantar JWT dalam pengepala Kebenaran.
   

   const response = await fetch('/api/protected', {
     headers: {
       'Authorization': `Bearer ${token}`,
     },
   });
   
   

3. Sahkan JWT pada pelayan: Dalam laluan API atau perisian tengah, sahkan JWT sebelum mengakses sumber yang dilindungi.
   

   import jwt from 'jsonwebtoken';
   
   export async function handler(req, res) {
     const token = req.headers.authorization?.split(' ')[1];
     if (!token) return res.status(401).json({ message: 'Unauthorized' });
   
     try {
       const decoded = jwt.verify(token, process.env.JWT_SECRET);
       req.user = decoded; // Attach the decoded user to the request
       next();
     } catch (err) {
       return res.status(401).json({ message: 'Invalid token' });
     }
   }
   
   

4. Gunakan kuki untuk log masuk berterusan: Anda boleh menetapkan kuki HTTP sahaja dengan JWT, supaya pengguna kekal disahkan merentas sesi.

70. Bagaimanakah anda boleh mengendalikan kebenaran dalam Next.js?

Keizinan dalam Next.js biasanya melibatkan pemeriksaan peranan atau tahap kebenaran pengguna selepas pengesahan berjaya. Berikut ialah beberapa pendekatan:

1. Keizinan berasaskan peranan: Setelah pengguna log masuk, anda menyimpan peranan mereka dalam JWT dan menyemaknya apabila pengguna cuba mengakses laluan yang dilindungi.
   

   export async function handler(req, res) {
     const token = req.cookies.token;
     if (!token) return res.status(403).json({ message: 'Forbidden' });
   
     const decoded = jwt.verify(token, process.env.JWT_SECRET);
     if (decoded.role !== 'admin') {
       return res.status(403).json({ message: 'Forbidden' });
     }
     // Proceed with handling the request
   }
   
   

2. perisian tengah kebenaran tersuai: Anda boleh mencipta perisian tengah tersuai untuk menyemak sama ada pengguna mempunyai kebenaran yang diperlukan sebelum menyampaikan halaman atau laluan API tertentu.

3. Ubah hala pengguna yang tidak dibenarkan: Untuk halaman SSR atau SSG, anda boleh menggunakan getServerSideProps untuk menyemak sama ada pengguna dibenarkan dan mengubah hala mereka jika tidak.
   

   export async function getServerSideProps(context) {
     const token = context.req.cookies.token;
     if (!token) {
       return { redirect: { destination: '/login', permanent: false } };
     }
     return { props: {} };
   }
   
   

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