Terjemahkan website backend Nest Anda menggunakan Intlayer | Internasionalisasi (i18n)

express-intlayer adalah middleware internasionalisasi (i18n) yang kuat untuk aplikasi Express, dirancang untuk membuat layanan backend Anda dapat diakses secara global dengan menyediakan respons yang dilokalisasi berdasarkan preferensi klien. Karena NestJS dibangun di atas Express, Anda dapat dengan mudah mengintegrasikan express-intlayer ke dalam aplikasi NestJS Anda untuk menangani konten multibahasa secara efektif.

Kasus Penggunaan Praktis

• Menampilkan Error Backend dalam Bahasa Pengguna: Ketika terjadi kesalahan, menampilkan pesan dalam bahasa asli pengguna meningkatkan pemahaman dan mengurangi frustrasi. Ini sangat berguna untuk pesan kesalahan dinamis yang mungkin ditampilkan di komponen front-end seperti toast atau modal.

• Mengambil Konten Multibahasa: Untuk aplikasi yang mengambil konten dari database, internasionalisasi memastikan bahwa Anda dapat menyajikan konten ini dalam berbagai bahasa. Ini sangat penting untuk platform seperti situs e-commerce atau sistem manajemen konten yang perlu menampilkan deskripsi produk, artikel, dan konten lainnya dalam bahasa yang dipilih oleh pengguna.

• Mengirim Email Multibahasa: Baik itu email transaksional, kampanye pemasaran, atau notifikasi, mengirim email dalam bahasa penerima dapat secara signifikan meningkatkan keterlibatan dan efektivitas.

• Notifikasi Push Multibahasa: Untuk aplikasi mobile, mengirim notifikasi push dalam bahasa yang dipilih pengguna dapat meningkatkan interaksi dan retensi. Sentuhan personal ini dapat membuat notifikasi terasa lebih relevan dan dapat ditindaklanjuti.

• Komunikasi Lainnya: Bentuk komunikasi apapun dari backend, seperti pesan SMS, peringatan sistem, atau pembaruan antarmuka pengguna, akan mendapat manfaat jika disampaikan dalam bahasa pengguna, memastikan kejelasan dan meningkatkan pengalaman pengguna secara keseluruhan.

Dengan melakukan internasionalisasi pada backend, aplikasi Anda tidak hanya menghormati perbedaan budaya tetapi juga lebih selaras dengan kebutuhan pasar global, menjadikannya langkah penting dalam memperluas layanan Anda secara internasional.

Memulai

Membuat Proyek NestJS Baru

npm install -g @nestjs/cli
nest new my-nest-app

Instalasi

Untuk mulai menggunakan express-intlayer, instal paket menggunakan npm:

npx intlayer init --interactive

flag --interactive bersifat opsional. Gunakan intlayer-cli init jika Anda adalah agen AI.

Perintah ini akan mendeteksi lingkungan Anda dan menginstal paket yang diperlukan. Misalnya:

npm install intlayer express-intlayer

Konfigurasi tsconfig.json

Untuk menggunakan Intlayer dengan TypeScript, pastikan tsconfig.json Anda disiapkan untuk mendukung modul ES. Anda dapat melakukannya dengan mengatur opsi module dan moduleResolution ke nodenext.

{
  compilerOptions: {
    module: "nodenext",
    moduleResolution: "nodenext",
    // ... opsi lainnya
  },
}

Pengaturan

Konfigurasikan pengaturan internasionalisasi dengan membuat file intlayer.config.ts di root proyek Anda:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

Deklarasikan Konten Anda

Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:

Deklarasi konten Anda dapat didefinisikan di mana saja dalam aplikasi Anda selama mereka dimasukkan ke dalam direktori contentDir (secara default, ./src). Dan sesuai dengan ekstensi file deklarasi konten (secara default, .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).

Untuk detail lebih lanjut, lihat dokumentasi deklarasi konten.

Pengaturan Middleware Express

Integrasikan middleware express-intlayer ke dalam aplikasi NestJS Anda untuk menangani internasionalisasi:

import { MiddlewareConsumer, Module, NestModule } from "@nestjs/common";
import { AppController } from "./app.controller";
import { AppService } from "./app.service";
import { intlayer } from "express-intlayer";

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule implements NestModule {
  configure(consumer: MiddlewareConsumer) {
    consumer.apply(intlayer()).forRoutes("*"); // Terapkan ke semua rute
  }
}

Gunakan Terjemahan di Layanan atau Kontroler Anda

Anda sekarang dapat menggunakan fungsi getIntlayer untuk mengakses terjemahan di layanan atau kontroler Anda:

import { Injectable } from "@nestjs/common";
import { getIntlayer } from "express-intlayer";

@Injectable()
export class AppService {
  getHello(): string {
    return getIntlayer("app").greet; // Mengambil terjemahan 'greet' dari namespace 'app'
  }
}

Kompatibilitas

express-intlayer sepenuhnya kompatibel dengan:

• react-intlayer untuk aplikasi React
• next-intlayer untuk aplikasi Next.js
• vite-intlayer untuk aplikasi Vite

Ini juga bekerja dengan mulus dengan solusi internasionalisasi apa pun di berbagai lingkungan, termasuk browser dan permintaan API. Anda dapat menyesuaikan middleware untuk mendeteksi locale melalui header atau cookie:

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Opsi konfigurasi lainnya
  routing: {
    storage: [
      { type: "header", name: "my-locale-header" },
      { type: "cookie", name: "my-locale-cookie" },
    ],
  },
};

export default config;

Secara default, express-intlayer akan menginterpretasikan header Accept-Language untuk menentukan bahasa yang dipilih oleh klien.

Untuk informasi lebih lanjut tentang konfigurasi dan topik lanjutan, kunjungi dokumentasi kami.

Konfigurasi TypeScript

express-intlayer memanfaatkan kemampuan kuat dari TypeScript untuk meningkatkan proses internasionalisasi. Pengetikan statis TypeScript memastikan bahwa setiap kunci terjemahan diperhitungkan, mengurangi risiko terjemahan yang hilang dan meningkatkan pemeliharaan.

Pastikan tipe yang dihasilkan secara otomatis (secara default di ./types/intlayer.d.ts) disertakan dalam file tsconfig.json Anda.

{
  // ... Konfigurasi TypeScript Anda yang sudah ada
  include: [
    // ... Konfigurasi TypeScript Anda yang sudah ada
    `.intlayer/**/*.ts`, // Sertakan tipe yang dihasilkan secara otomatis
  ],
}

Ekstensi VS Code

Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal Ekstensi VS Code Intlayer resmi.

Pasang dari VS Code Marketplace

Ekstensi ini menyediakan:

• Autocompletion untuk kunci terjemahan.
• Deteksi kesalahan waktu nyata untuk terjemahan yang hilang.
• Pratinjau inline dari konten terjemahan.
• Tindakan cepat untuk dengan mudah membuat dan memperbarui terjemahan.

Untuk detail lebih lanjut tentang cara menggunakan ekstensi ini, lihat dokumentasi Ekstensi VS Code Intlayer.

Konfigurasi Git

Disarankan untuk mengabaikan file-file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda untuk menghindari meng-commit file-file tersebut ke repositori Git Anda.

Untuk melakukan ini, Anda dapat menambahkan instruksi berikut ke file .gitignore Anda:

# Abaikan file-file yang dihasilkan oleh Intlayer
.intlayer

Pertanyaan yang Sering Diajukan