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

Καλές πρακτικές

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/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});
}

Δείτε τα παραδείγματα server-side rendering για περισσότερες πληροφορίες σχετικά με getTacoTranslateStaticProps.

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