Penyelesaian terbaik untuk pengantarabangsaan (i18n) dalam aplikasi Next.js
Adakah anda ingin mengembangkan aplikasi Next.js anda ke pasaran baru? TacoTranslate memudahkan anda untuk mengalihbahasakan projek Next.js anda, membolehkan anda mencapai audiens global tanpa kerumitan.
Mengapa memilih TacoTranslate untuk Next.js?
- Integrasi Lancar: Direka khusus untuk aplikasi Next.js, TacoTranslate berintegrasi dengan mudah ke dalam aliran kerja sedia ada anda.
- Pemungutan String Automatik: Tidak perlu lagi mengurus fail JSON secara manual. TacoTranslate secara automatik mengumpulkan string dari kod anda.
- Terjemahan Berkuasa AI: Manfaatkan kuasa AI untuk menyediakan terjemahan yang tepat mengikut konteks yang sesuai dengan nada aplikasi anda.
- Sokongan Bahasa Segera: Tambah sokongan untuk bahasa baru dengan hanya satu klik, menjadikan aplikasi anda boleh diakses secara global.
Bagaimana ia berfungsi
Apabila dunia menjadi lebih global, adalah semakin penting bagi pembangun web untuk membina aplikasi yang boleh memenuhi keperluan pengguna dari pelbagai negara dan budaya. Salah satu cara utama untuk mencapai ini adalah melalui internationalization (i18n), yang membolehkan anda menyesuaikan aplikasi anda kepada pelbagai bahasa, mata wang, dan format tarikh.
Dalam tutorial ini, kami akan meneroka cara menambah internationalization ke dalam aplikasi React Next.js anda, dengan server side rendering. TL;DR: Lihat contoh penuh di sini.
Panduan ini untuk aplikasi Next.js yang menggunakan Pages Router.
Jika anda menggunakan App Router, sila lihat panduan ini sebagai gantinya.
Langkah 1: Pasang perpustakaan i18n
Untuk melaksanakan internasionalisasi dalam aplikasi Next.js anda, kita akan mula memilih sebuah perpustakaan i18n. Terdapat beberapa perpustakaan popular, termasuk next-intl. Walau bagaimanapun, dalam contoh ini, kita akan menggunakan TacoTranslate.
TacoTranslate secara automatik menterjemah string anda ke mana-mana bahasa menggunakan AI canggih, dan membebaskan anda daripada pengurusan fail JSON yang membosankan.
Jom pasangkan ia menggunakan npm di terminal anda:
npm install tacotranslate
Langkah 2: Cipta akaun TacoTranslate percuma
Sekarang anda telah memasang modul tersebut, tiba masanya untuk mencipta akaun TacoTranslate anda, projek terjemahan, dan kunci API yang berkaitan. Cipta akaun di sini. Ia percuma, dan tidak memerlukan anda untuk menambah kad kredit.
Dalam antara muka aplikasi TacoTranslate, buat satu projek, dan navigasi ke tab kunci API-nya. Buat satu kunci read
dan satu kunci read/write
. Kami akan menyimpannya sebagai pembolehubah persekitaran. Kunci read
adalah apa yang kami panggil public
dan kunci read/write
adalah secret
. Sebagai contoh, anda boleh menambahkannya ke dalam fail .env
di akar projek anda.
TACOTRANSLATE_PUBLIC_API_KEY=123456
TACOTRANSLATE_SECRET_API_KEY=789010
Pastikan untuk tidak sesekali menyalurkan kunci API rahsia read/write
ke persekitaran produksi sebelah klien.
Kami juga akan menambah dua pembolehubah persekitaran lagi: TACOTRANSLATE_DEFAULT_LOCALE
dan TACOTRANSLATE_ORIGIN
.
TACOTRANSLATE_DEFAULT_LOCALE
: Kod lokal teras lalai. Dalam contoh ini, kami akan menetapkannya kepadaen
untuk Bahasa Inggeris.TACOTRANSLATE_ORIGIN
: “Folder” di mana rentetan anda akan disimpan, seperti URL laman web anda. Baca lebih lanjut tentang origins di sini.
TACOTRANSLATE_DEFAULT_LOCALE=en
TACOTRANSLATE_ORIGIN=your-website-url.com
Langkah 3: Menyediakan TacoTranslate
Untuk mengintegrasikan TacoTranslate dengan aplikasi anda, anda perlu mencipta klien menggunakan kekunci API dari sebelumnya. Sebagai contoh, cipta fail bernama /tacotranslate-client.js
.
const {default: createTacoTranslateClient} = require('tacotranslate');
const tacoTranslate = createTacoTranslateClient({
apiKey:
process.env.TACOTRANSLATE_SECRET_API_KEY ??
process.env.TACOTRANSLATE_PUBLIC_API_KEY ??
process.env.TACOTRANSLATE_API_KEY ??
'',
projectLocale: process.env.TACOTRANSLATE_DEFAULT_LOCALE ?? '',
});
module.exports = tacoTranslate;
Kami akan secara automatik menentukan TACOTRANSLATE_API_KEY
tidak lama lagi.
Mewujudkan klien dalam fail berasingan memudahkan penggunaan semula kemudian. Kini, dengan menggunakan /pages/_app.tsx
khusus, kami akan menambah penyedia TacoTranslate
.
import React from 'react';
import {type AppProps} from 'next/app';
import {type Origin, type Locale, type Localizations} from 'tacotranslate';
import TacoTranslate from 'tacotranslate/react';
import TacoTranslateHead from 'tacotranslate/next/head';
import tacoTranslate from '../tacotranslate-client';
type PageProperties = {
origin: Origin;
locale: Locale;
locales: Locale[];
localizations: Localizations;
};
export default function App({Component, pageProps}: AppProps<PageProperties>) {
const {origin, locale, locales, localizations} = pageProps;
return (
<TacoTranslate
client={tacoTranslate}
origin={origin}
locale={locale}
localizations={localizations}
>
<TacoTranslateHead rootUrl="https://your-website.com" locales={locales} />
<Component {...pageProps} />
</TacoTranslate>
);
}
Jika anda sudah mempunyai pageProps
dan _app.tsx
yang tersuai, sila sambungkan definisi tersebut dengan sifat-sifat dan kod dari atas.
Langkah 4: Melaksanakan rendering sisi pelayan
TacoTranslate membenarkan rendering sisi server bagi terjemahan anda. Ini sangat meningkatkan pengalaman pengguna dengan menunjukkan kandungan yang diterjemah segera, bukannya sekilas kandungan yang tidak diterjemah terlebih dahulu. Selain itu, kita boleh mengelakkan permintaan rangkaian pada klien, kerana kita sudah mempunyai semua terjemahan yang diperlukan.
Kita akan mulakan dengan mencipta atau mengubah /next.config.js
.
const withTacoTranslate = require('tacotranslate/next/config').default;
const tacoTranslateClient = require('./tacotranslate-client');
module.exports = async () => {
const config = {};
return withTacoTranslate(config, {
client: tacoTranslateClient,
isProduction:
process.env.TACOTRANSLATE_ENV === 'production' ||
process.env.VERCEL_ENV === 'production' ||
(!(process.env.TACOTRANSLATE_ENV || process.env.VERCEL_ENV) &&
process.env.NODE_ENV === 'production'),
});
};
Ubah suai semak isProduction
agar sesuai dengan persediaan anda. Jika true
, TacoTranslate akan memaparkan kunci API awam. Jika kami berada dalam persekitaran tempatan, ujian atau pementasan (isProduction
is false
), kami akan menggunakan kunci API read/write
rahsia untuk memastikan rentetan baharu dihantar untuk terjemahan.
Sehingga kini, kami hanya menetapkan aplikasi Next.js dengan senarai bahasa yang disokong. Perkara seterusnya yang akan kita lakukan adalah mendapatkan terjemahan untuk semua halaman anda. Untuk melakukannya, anda akan menggunakan sama ada getTacoTranslateStaticProps
atau getTacoTranslateServerSideProps
berdasarkan keperluan anda.
Fungsi-fungsi ini mengambil tiga argumen: Satu objek Next.js Static Props Context, konfigurasi untuk TacoTranslate, dan sifat Next.js pilihan. Perhatikan bahawa revalidate
pada getTacoTranslateStaticProps
ditetapkan kepada 60 secara lalai, supaya terjemahan anda sentiasa dikemas kini.
Untuk menggunakan mana-mana fungsi ini dalam suatu halaman, mari anggap anda mempunyai fail halaman seperti /pages/hello-world.tsx
.
import {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
export async function getStaticProps(context) {
return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}
export default function Page() {
return <Translate string="Hello, world!"/>;
}
Anda sekarang sepatutnya dapat menggunakan komponen Translate
untuk menterjemah rentetan dalam semua komponen React anda.
import {Translate} from 'tacotranslate/react';
function Component() {
return <Translate string="Hello, world!"/>
}
Langkah 5: Lancarkan dan uji!
Kami telah selesai! Aplikasi Next.js anda kini akan diterjemahkan secara automatik apabila anda menambah sebarang rentetan ke dalam komponen Translate
. Perlu diingat bahawa hanya persekitaran dengan kebenaran read/write
pada kunci API akan dapat mencipta rentetan baru untuk diterjemahkan. Kami mengesyorkan mempunyai persekitaran staging yang tertutup dan selamat di mana anda boleh menguji aplikasi produksi anda dengan kunci API seperti itu, menambah rentetan baru sebelum dilancarkan secara langsung. Ini akan menghalang sesiapa sahaja daripada mencuri kunci API rahsia anda, dan berpotensi memenuhi projek terjemahan anda dengan rentetan baru yang tidak berkaitan.
Be sure to check out the complete example over at our GitHub profile. There, you’ll also find an example of how to do this using the App Router! If you encounter any problems, feel free to reach out, and we’ll be more than happy to help.
TacoTranslate lets you automatically localize your React applications quickly to and from over 75 languages. Get started today!