Τεκμηρίωση: Βέλτιστες πρακτικές

Βέλτιστες πρακτικές

Greek

Βάλτε τις διευθύνσεις URL σε μεταβλητές

Όταν μεταφράζετε συμβολοσειρές που περιέχουν διευθύνσεις URL ή παρόμοια δεδομένα, θεωρείται καλή πρακτική να τοποθετείτε αυτές τις διευθύνσεις URL μέσα σε μεταβλητές και στη συνέχεια να τις αναφέρετε μέσα στα πρότυπά σας.

<Translate
	string={`Click <a href="{{url}}">here</a>`}
	variables={{url: 'https://tacotranslate.com'}}
/>

Χρησιμοποιήστε ετικέτες ARIA

Κατά τη μετάφραση του κειμένου διαδραστικών στοιχείων όπως τα κουμπιά, είναι σημαντικό να συμπεριλαμβάνονται ετικέτες ARIA για να διασφαλιστεί η προσβασιμότητα. Οι ετικέτες ARIA βοηθούν τους αναγνώστες οθόνης να παρέχουν περιγραφικές πληροφορίες σχετικά με τη λειτουργία του στοιχείου.

Για παράδειγμα, αν έχετε ένα κουμπί που επιτρέπει στους χρήστες να αντιγράψουν κείμενο από ένα μπλοκ κώδικα, μπορείτε να χρησιμοποιήσετε το aria-label χαρακτηριστικό για να παρέχετε μια σαφή περιγραφή:

<Translate
	aria-label={useTranslation('Copy to clipboard')}
	string="Copy"
/>

Κάτι σε αυτό μοιάζει πολύ μέτα.

Παγκόσμιος πίνακας προελεύσεων και πολλαπλές προελεύσεις ανά συστατικό

Αυτό το μοτίβο λειτουργεί μόνο όταν χρησιμοποιείτε τον Next.js Pages Router.

Όταν εργάζεστε με μεγαλύτερες εφαρμογές, είναι ωφέλιμο να χωρίζετε τις συμβολοσειρές και τις μεταφράσεις σε πολλές, μικρότερες πηγές. Αυτή η προσέγγιση βοηθά στη μείωση του μεγέθους των πακέτων και των χρόνων μεταφοράς, εξασφαλίζοντας αποτελεσματική και επεκτάσιμη τοπικοποίηση.

Ενώ αυτό είναι απλό όταν η απόδοση γίνεται μόνο στην πλευρά του πελάτη, η διαχείριση των πηγών γρήγορα γίνεται περίπλοκη όταν ανακτώνται μεταφράσεις για απόδοση στην πλευρά του διακομιστή. Ωστόσο, μπορείτε να αυτοματοποιήσετε τη διαχείριση των πηγών αξιοποιώντας τον πίνακα origins του πελάτη TacoTranslate.

Δείτε αυτό το παράδειγμα, όπου έχουμε χωρίσει τα components και τις σελίδες μας σε ξεχωριστά αρχεία.

components/pricing-table.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import tacoTranslate from '../tacotranslate-client';

// Set an origin name for this component
const origin = 'components/pricing-table';

// Push the origin into the origins array as this file is imported
tacoTranslate.origins.push(origin);

export default function PricingTable() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing table" />
			// ...
		</TacoTranslate>
	);
}

pages/pricing.tsx

import TacoTranslate, {Translate} from 'tacotranslate/react';
import getTacoTranslateStaticProps from 'tacotranslate/next/get-static-props';
import tacoTranslateClient from '../tacotranslate-client';
import PricingTable from '../components/pricing-table';

const origin = 'pages/pricing';
tacoTranslateClient.origins.push(origin);

export default function PricingPage() {
	return (
		<TacoTranslate origin={origin}>
			<Translate string="Pricing page" />
			<PricingTable />
		</TacoTranslate>
	);
}

// We will now fetch translations for all imported components and their origins automatically
export async function getStaticProps(context) {
	return getTacoTranslateStaticProps(context, {client: tacoTranslateClient});
}

Δείτε τα παραδείγματα απόδοσης στην πλευρά του διακομιστή μας παραδείγματα απόδοσης στην πλευρά του διακομιστή για περισσότερες πληροφορίες σχετικά με getTacoTranslateStaticProps.

Διαχείριση σφαλμάτων και αποσφαλμάτωση