Czym jest Next.js ?

Jak wykorzystać Next.js przy lokalizacji stron internetowych?

Nextjs to narzędzie wykorzystywane do tworzenia aplikacji internetowych z użyciem React, JavaScript i Node.js zarówno po stronie klienta, jak i po stronie serwera. Narzędzie zostało stworzone przez ZEIT. Jest to firma zajmująca się hostowaniem serwerów i wdrażaniem aplikacji. Głównym celem tego narzędzia jest zwiększenie szybkości ładowania aplikacji internetowych, a także ułatwienie tworzenia aplikacji typu server-rendered. Narzędzie to oferuje szereg funkcjonalności, które pozwalają na szybkie i efektywne tworzenie stron internetowych.

Nextjs to minimalistyczny framework, który umożliwia łatwe i szybkie tworzenie aplikacji internetowych opartych na React. Jego głównym celem jest uproszczenie procesu tworzenia aplikacji internetowych, jednocześnie zachowując wydajność i skalowalność. Jedną z głównych zalet Nextjs jest to, że jest to framework oparty na Node.js, co oznacza, że korzysta z serwera Node.js do generowania plików HTML, CSS i JavaScript na serwerze. Nextjs pozwala na generowanie statycznych stron internetowych. Dzięki temu, kiedy użytkownik wejdzie na stronę, nie musi ona być generowana na żywo przez serwer, co przekłada się na znacznie szybsze ładowanie strony i zmniejszenie obciążenia serwera. Dzięki wbudowanym funkcjom, takim jak zarządzanie stanem aplikacji oraz routing, developer może skrócić czas na wygenerowanie treści na stronie.

Chcesz przetłumaczyć stronę za pomocą next.js? Napisz do nas!

W Skrivanek zajmujemy się tłumaczeniem stron internetowych, a także tłumaczeniem oprogramowania. Posiadamy duże doświadczenie w zakresie tłumaczenia sklepów internetowych oraz CMSów takich jak: Mozello, TYPO3, WIX oraz wielu innych. Korzystamy z wielu narzędzi CAT dostępnych na rynku, dzięki czemu możemy zagwarantować elastyczne podejście do każdego projektu.

Główne funkcjonalności Nextjs po stronie serwera (server side rendering):

Pierwszą funkcjonalnością jest właśnie server-side rendering (SSR) – pozwala na renderowanie strony po stronie serwera, co umożliwia szybsze ładowanie aplikacji i zwiększenie jej wydajności. Dzięki temu użytkownik może zobaczyć zawartość strony już w momencie, gdy zostanie ona pobrana z serwera, a nie dopiero po wykonaniu kodu JavaScript na stronie klienta.
Static site generation (SSG) – umożliwia generowanie statycznych stron internetowych, co pozwala na szybsze ładowanie i wydajniejsze działanie aplikacji.
Automatic code splitting – gwarantuje automatyczne dzielenie kodu na mniejsze części, co umożliwia szybsze ładowanie strony i zwiększa jej wydajność.
Automatic static optimization – jest to automatyczna optymalizacja plików statycznych, co pozwala na szybsze ładowanie aplikacji i zmniejsza jej rozmiar.
CSS-in-JS – umożliwia stosowanie stylów CSS bezpośrednio w kodzie JavaScript, co ułatwia tworzenie responsywnych aplikacji internetowych.
TypeScript – wbudowany support dla języka TypeScript, co pozwala na łatwe tworzenie aplikacji w tym języku.
API routes – umożliwia łatwe tworzenie REST API dla aplikacji.

W celu przetłumaczenia strony internetowej opartej na Nextjs należy wykonać następujące kroki:

Zainstalować niezbędne narzędzia: Node.js oraz npm (menadżer pakietów dla języka JavaScript).
Stworzyć nowy projekt Nextjs, wykorzystując szablon lub polecenie npx create-next-app.
Przygotować kod do tłumaczenia dla wszystkich elementów strony które mają zostać przetłumaczone. Można to zrobić przy użyciu biblioteki i18next lub tzw. parsera. Punkt ten rozwiniemy szerzej poniżej, gdyż można podejść do tego tematu na kilka sposobów.
Zaimplementować funkcjonalność wyświetlania odpowiedniego tłumaczenia w zależności od wybranego języka.

Punkt numer 3 z powyższej listy warto rozwinąć z uwagi na dwie dostępne możliwości. Pierwsza z nich wymaga samodzielnego przygotowania pliku, a druga pozwala na to, aby dane były wyeksportowane z podstron w sposób automatyczny z katalogu pages.

Aby wyeksportować treść do plików JSON lub YAML, można użyć funkcji useTranslation dostępnej w bibliotece next-i18next. Funkcja ta umożliwia pobranie wszystkich ciągów tekstowych z bieżącego języka i zapisanie ich do pliku JSON lub YAML. Minusem tego rozwiązania jest to, że w przypadku użycia biblioteki next-i18next i funkcji useTranslation trzeba samodzielnie dodać wszystkie ciągi które chcemy przetłumaczyć do pliku, po czym wyeksportować je do tłumaczenia. Funkcja useTranslation służy do uzyskania dostępu do ciągów w bieżącym języku i ich tłumaczeń. Przykładowy wzór, który pozwala pobrać dane, można znaleźć poniżej w postaci kodu oraz zdjęcia.

import { useTranslation } from 'next-i18next';
import fs from 'fs';

function ExportTranslations() {
  const { t } = useTranslation();
  const content = {
    hello: t('hello'),
    goodbye: t('goodbye'),
    // Tutaj dodajemy pozostałe ciągi tekstowe, które mają być tłumaczone
  };
  fs.writeFileSync('translations.json', JSON.stringify(content));
  return <div>Wyeksportowano treść do pliku JSON</div>;
}

export default ExportTranslations;

prosty tekst pokazujący jak wyeksportować dane do tłumaczenia do pliku json

2. W celu automatyzacji procesu dodawania ciągów tekstowych do pliku można użyć narzędzia takiego jak i18next-parser które pozwala zidentyfikować wszystkie ciągi tekstowe w projekcie i automatycznie dodaje je do pliku json. Taki plik można wykorzystać do dalszej pracy nad tłumaczeniami. Aby zastosować i18next-parser w projekcie Nextjs, musimy najpierw zainstalować go za pomocą npm poniższą komendą:

npm install i18next-parser --save-dev

Następnie trzeba wywołać narzędzie z wiersza poleceń, aby przetworzyć pliki źródłowe i wygenerować plik *.json, który będzie nadawać się do tłumaczenia. Przykładowo, aby przetworzyć pliki JavaScript i React, można użyć następującej komendy:

i18next --input "./**/*.js" --output ./locales/{{lng}}/{{ns}}.json

Komenda ta przetworzy wszystkie pliki z rozszerzeniem .js i wygeneruje pliki tłumaczeń w formacie JSON w katalogu ./locales/{{lng}}/{{ns}}.json, gdzie {{lng}} to kod języka, a {{ns}} to nazwy ciągów tekstowych.

W Skrivanek chętnie zajmiemy się tak przygotowanymi plikami, które możemy przetłumaczyć na wiele języków. Niezależnie od tego, czy otrzymamy pliki w formacie json, js, czysty kod html, czy też będzie to inny mniej znany format, poradzimy sobie z nim tak, aby bez problemu mógł zostać zaimplementowany z powrotem na serwerze. Oferujemy szeroki zakres usług tłumaczeniowych, w tym tłumaczenia maszynowe i postedycję. Jako firma z bardzo bogatym doświadczeniem, proponujemy również takie usługi jak SEO, lokalizacja, testowanie stron, oprogramowania i aplikacji, copywriting i wiele innych. Zapraszamy do kontaktu poprzez formularz na naszej stronie.

Słownik pojęć przydatnych dla tego artykułu:

server side rendering – technika w programowaniu, w której renderowanie treści strony internetowej odbywa się po stronie serwera, a nie po stronie klienta. Pozwala to na wygenerowanie treści strony jeszcze przed jej przesłaniem do przeglądarki klienta, co zwiększa jej wydajność i przyspiesza ładowanie w przeglądarce;
render – proces generowania HTML, CSS i JavaScript, który tworzy wyświetlaną stronę internetową lub aplikację;
rendering – proces wyświetlania treści strony internetowej lub aplikacji na ekranie lub innym urządzeniu;
server components – komponenty strony internetowej lub aplikacji internetowej, które są renderowane po stronie serwera, a nie klienta. Umożliwiają one tworzenie dynamicznych stron internetowych, w których wiele elementów jest generowanych w czasie rzeczywistym na podstawie danych pobieranych z bazy danych lub innego źródła;
features – funkcjonalności dostępne w ramach danego systemu, aplikacji, strony internetowej czy też frameworku. Może to obejmować różne elementy, takie jak moduły, biblioteki, narzędzia, szablony itp;
documentation – dokumentacja techniczna, która opisuje sposób korzystania z danego systemu, aplikacji, strony internetowej czy też frameworku. Zawiera opisy funkcjonalności, sposobu konfiguracji, integracji, wersjonowania, etc;
package – paczka lub biblioteka zawierająca kod źródłowy, moduły i inne zasoby, które można zainstalować i używać w projekcie lub aplikacji. Zwykle są one udostępniane za pomocą menedżerów paczek, takich jak npm w przypadku języka JavaScript;
scripts – skrypty, które wykonują określone zadania w ramach projektu lub aplikacji. Mogą to być skrypty budujące, testujące, automatyzujące procesy itp;
routing – proces przekierowania zapytania HTTP do odpowiedniego kontrolera lub widoku w aplikacji internetowej. Umożliwia to nawigację po różnych częściach aplikacji lub stronie internetowej;
routing strony – proces ustalania ścieżki URL dla określonej strony internetowej lub aplikacji internetowej. Umożliwia to łatwe przekierowywanie użytkowników między różnymi częściami aplikacji lub strony;
data fetching – proces pobierania danych z różnych źródeł, takich jak baza danych, API lub inny serwis, w celu ich wyświetlenia na stronie internetowej lub w aplikacji;
developer – osoba zajmująca się programowaniem i tworzeniem aplikacji lub stron internetowych;
config – skrót od słowa „configuration”, oznacza konfigurację projektu, aplikacji lub frameworka. Zawiera informacje o ustawieniach, parametrach, wersjach, etc;
automatic code splitting – technika polegająca na automatycznym dzieleniu kodu źródłowego aplikacji na mniejsze części, zwane chunkami, które są ładowane tylko wtedy, gdy są potrzebne. Pozwala to na zoptymalizowanie wydajności aplikacji oraz skrócenie czasu ładowania strony;
framework – zestaw narzędzi i bibliotek programistycznych, które ułatwiają tworzenie aplikacji lub stron internetowych. Frameworki zwykle dostarczają gotowe rozwiązania dla wielu problemów, takich jak zarządzanie stanem, routing, obsługa formularzy itp;
API – skrót od Application Programming Interface, czyli interfejsu programowania aplikacji. Oznacza to zestaw funkcji, protokołów i narzędzi programistycznych, które umożliwiają interakcję między różnymi aplikacjami lub komponentami aplikacji;
React – biblioteka JavaScript używana do tworzenia interaktywnych interfejsów użytkownika. React został stworzony przez firmę Facebook i jest wykorzystywany przez wiele dużych witryn internetowych oraz aplikacji. Jego główną ideą jest tworzenie modułowych i reużywalnych komponentów, które pozwalają na łatwe zarządzanie stanem aplikacji oraz dynamiczne aktualizowanie interfejsu użytkownika w odpowiedzi na zmiany w stanie. React korzysta z języka JSX, który umożliwia mieszanie kodu JavaScript z kodem HTML, co ułatwia tworzenie i utrzymanie aplikacji. React jest również często wykorzystywany w połączeniu z bibliotekami i narzędziami, takimi jak Redux, React Router i Webpack, aby zwiększyć jego funkcjonalność i ułatwić jego użycie.

Potrzebujesz tłumaczenia lub innej usług językowej?

Napisz do nas!

Kontakt