tRPC dengan Penghala Aplikasi Next.js
Sepadukan tRPC dengan lancar ke dalam Penghala Aplikasi Next.js sambil memanfaatkan komponen pelayan untuk pengambilan data yang cekap.
tRPC dengan Penghala Aplikasi Next.js ialah pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus API tRPC Selamat Jenis dari Hujung ke Hujung merangkumi sejumlah 4 pelajaran.
tRPC & Penghala Aplikasi Next.js
Selamat datang ke era baharu pembangunan web dengan Penghala Aplikasi Next.js! Pelajaran ini akan membimbing anda mengintegrasikan tRPC ke dalam seni bina yang berkuasa ini.
Penghala Aplikasi memperkenalkan paradigma baharu seperti Komponen Pelayan dan Komponen Klien. tRPC membantu anda mengekalkan keselamatan jenis hujung ke hujung merentas persekitaran pemaparan yang berbeza ini.
Memahami Asas Penghala Aplikasi
Sebelum mendalami tRPC, mari kita imbas kembali konsep teras Penghala Aplikasi dengan cepat:
- Komponen Pelayan: Dipaparkan pada pelayan dan sesuai untuk mendapatkan data serta kandungan statik. Komponen ini tidak mempunyai keadaan atau interaktiviti.
- Komponen Klien: Dipaparkan pada klien dan membolehkan interaktiviti, keadaan serta API pelayar. Komponen ini ditandakan dengan
'use client';.
tRPC memainkan peranan penting dalam menjadikan pengambilan data selamat dari segi jenis, tanpa mengira sama ada anda berada dalam Komponen Pelayan atau Komponen Klien.
Penyesuai Penghala Aplikasi tRPC
Untuk mengintegrasikan tRPC dengan Penghala Aplikasi Next.js, anda akan menggunakan penyesuai @trpc/next/app-router. Pakej ini menyediakan utiliti yang direka khusus untuk persekitaran ini.
Penyesuai ini mengendalikan perincian pemanggilan prosedur tRPC daripada Komponen Pelayan (panggilan langsung) dan Komponen Klien (melalui cangkuk React Query).
Persediaan tRPC pada Pelayan
Mula-mula, anda perlu mendedahkan laluan API tRPC anda dalam direktori app. Biasanya, ini melibatkan penciptaan fail route.ts (contohnya, app/api/trpc/[trpc]/route.ts).
Penyesuai ini membantu mengkonfigurasi pelayan tRPC anda supaya berfungsi dengan lancar bersama laluan API Next.js, dengan mengendalikan permintaan yang masuk dan menghalakannya kepada prosedur tRPC anda.
Pengambilan Data dalam Komponen Pelayan
Salah satu kelebihan terbesar Penghala Aplikasi ialah keupayaan mendapatkan data secara langsung dalam Komponen Pelayan. Dengan tRPC, ini bermakna anda boleh memanggil prosedur bahagian belakang tanpa sebarang JavaScript pada klien.
Anda akan mencipta klien tRPC khas pada pelayan yang membolehkan anda memanggil prosedur secara langsung, sama seperti memanggil fungsi, sambil mengekalkan keselamatan jenis.
Demo Pengambilan Komponen Pelayan
Berikut ialah cara mendapatkan data menggunakan tRPC secara langsung di dalam Komponen Pelayan Next.js (contohnya, app/page.tsx). Perhatikan bahawa tiada cangkuk digunakan di sini.
// app/page.tsx (Server Component)
import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
import type { AppRouter } from '@/server/routers/_app'; // Your backend router type
// Create a server-side tRPC client for direct usage
const serverClient = createTRPCProxyClient<AppRouter>({
links: [
httpBatchLink({
url: 'http://localhost:3000/api/trpc', // Your tRPC API endpoint
}),
],
});
export default async function HomePage() {
// Fetch data directly in a Server Component
const greeting = await serverClient.example.hello.query({
text: 'from Server Component!'
});
return (
<div>
<h1>{greeting}</h1>
<p>This content is rendered on the server.</p>
</div>
);
}Persediaan tRPC pada Klien
Untuk Komponen Klien, anda masih perlu menyediakan pembekal tRPC pada klien. Biasanya, ini dilakukan dalam reka letak akar anda (contohnya, app/layout.tsx) dengan membalut aplikasi anda menggunakan komponen 'use client'; yang menyediakan klien tRPC.
Pembekal ini menjadikan cangkuk React Query tRPC tersedia untuk semua Komponen Klien.
Pengambilan Data dalam Komponen Klien
Di dalam Komponen Klien, anda akan menggunakan cangkuk React Query tRPC (seperti useQuery untuk mendapatkan data atau useMutation untuk mengubah data) sama seperti dalam aplikasi React tradisional.
Ingat untuk menandakan komponen anda dengan 'use client'; pada permulaan fail supaya komponen itu berjalan pada klien.
Demo Pengambilan Komponen Klien
Contoh ini menunjukkan Komponen Klien (contohnya, app/client-page/page.tsx) yang mendapatkan data menggunakan cangkuk useQuery tRPC. Komponen ini akan dipaparkan pada bahagian klien.
// app/client-page/page.tsx (Client Component)
'use client'; // Mark as a Client Component
import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '@/server/routers/_app'; // Your backend router type
// Initialize tRPC client for React hooks
const trpc = createTRPCReact<AppRouter>();
export default function ClientPage() {
// Use tRPC hooks to fetch data on the client
const { data, isLoading, error } = trpc.example.hello.useQuery({
text: 'from Client Component!'
});
if (isLoading) return <p>Loading client data...</p>;
if (error) return <p>Error: {error.message}</p>;
return (
<div>
<h1>{data}</h1>
<p>This data was fetched client-side with React Query.</p>
</div>
);
}Memilih Pengambilan pada Pelayan atau Klien
Bilakah anda patut mendapatkan data dalam Komponen Pelayan berbanding Komponen Klien?
- Komponen Pelayan: Sesuai untuk pemuatan data awal, kandungan statik dan data yang tidak memerlukan pengambilan semula atau interaktiviti pada klien. Saiz himpunan klien juga dikurangkan.
- Komponen Klien: Diperlukan untuk ciri interaktif, kemas kini masa nyata dan data yang berubah berdasarkan input pengguna. Komponen ini memanfaatkan pencachean dan pengambilan semula React Query.
Selalunya, pendekatan hibrid memberikan prestasi dan pengalaman pengguna yang terbaik.
Semakan Pantas: Pengambilan Penghala Aplikasi
Anda mahu mendapatkan data awal yang tidak interaktif untuk catatan blog secara langsung pada pelayan bagi meningkatkan prestasi pemuatan halaman. Jenis komponen dan corak penggunaan tRPC manakah yang paling sesuai?
Imbas Kembali: tRPC dalam Penghala Aplikasi
Syabas! Anda telah belajar mengintegrasikan tRPC dengan Penghala Aplikasi Next.js.
- tRPC menyediakan keselamatan jenis hujung ke hujung untuk Komponen Pelayan dan Komponen Klien.
- Gunakan klien tRPC pada pelayan untuk mendapatkan data secara langsung dalam Komponen Pelayan.
- Gunakan cangkuk React Query (melalui pembekal pada klien) untuk mendapatkan data secara interaktif dalam Komponen Klien.
- Pilihan antara pengambilan pada pelayan dan klien bergantung pada keperluan prestasi serta interaktiviti anda.
Pendekatan hibrid ini membolehkan anda membina aplikasi Next.js yang kukuh dan selamat dari segi jenis!
Pelajari API tRPC Selamat Jenis dari Hujung ke Hujung dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 10
- Pelajaran
- 40
Soalan Lazim
Adakah pelajaran “tRPC dengan Penghala Aplikasi Next.js” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung, termasuk “tRPC dengan Penghala Aplikasi Next.js”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus API tRPC Selamat Jenis dari Hujung ke Hujung merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “tRPC dengan Penghala Aplikasi Next.js”?
Sepadukan tRPC dengan lancar ke dalam Penghala Aplikasi Next.js sambil memanfaatkan komponen pelayan untuk pengambilan data yang cekap. Anda berlatih API tRPC Selamat Jenis dari Hujung ke Hujung menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan API tRPC Selamat Jenis dari Hujung ke Hujung?
Tiada pengalaman terdahulu diperlukan. Pembelajaran API tRPC Selamat Jenis dari Hujung ke Hujung di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “tRPC dengan Penghala Aplikasi Next.js” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung ini?
Ya. Setiap pelajaran API tRPC Selamat Jenis dari Hujung ke Hujung menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- tRPC dengan Penghala Aplikasi Next.js
- Integrasi React Query Lanjutan
- Komponen Pelayan dan Pengambilan Data tRPC
- Kemas Kini Optimistik dengan Mutasi tRPC