Skip to content
This repository has been archived by the owner on May 8, 2024. It is now read-only.

Clement-Muth/nextjs13-app-router-lingui

Repository files navigation

Next.js project with Lingui


Linguijs

🌍📖 A readable, automated, and optimized (3 kb) internationalization for JavaScript

Documentation · Quickstart · Example


Next.js

Documentation · Quickstart · Example

Next.js Project with Lingui

This project is an example of integration of Lingui with Next.js. It uses Next.js version 13.3.1 and Lingui version 4.2.0.

Goal

The purpose of this project is to test the integration of Lingui, a translation framework, with Next.js, a JavaScript framework based on React for web application development.

Features

  • Translation of text within the application using Lingui.
  • Utilization of ROME as the linter and formatter to maintain code quality.
  • Usage of Yarn Berry with hardlinks-local and nodeLinker node-modules to manage dependencies.

Prerequisites

Before starting, make sure you have the following installed on your system:

  • Node.js (version >=16.14.0)
  • Yarn (version 3.5.1)

Installation

  1. Clone this GitHub repository to your local machine:
git clone https://github.com/votre-utilisateur/nom-du-repo.git
  1. Navigate to the project directory:
cd name-of-repo
  1. Install the project dependencies using Yarn:
yarn install

Configuration

To configure Lingui, you need to follow these steps:

  1. Create a .env file at the root of the project and add the necessary environment variables. Refer to the .env.example file for the required variables.

  2. Modify the Lingui configuration files (lingui.config.js and next.config.js) to adjust the settings to your project.

Usage

To launch the application in development mode, run the following command:

yarn dev

This starts the Next.js development server, and you can access the application in your browser at the address http://localhost:3000.

To generate an optimized version of the application for production, run the following command:

yarn build

This generates the application's build in the .next directory, ready to be deployed to a server.

To run tests, use the following command:

yarn test

Yarn Berry avec Hardlinks-local et NodeLinker node-modules

This project uses Yarn Berry with the features of hardlinks-local and nodeLinker node-modules to manage dependencies efficiently and optimally.

What is Yarn Berry?

Yarn Berry is an enhanced version of Yarn that brings new features and improved performance. It replaces Yarn's traditional package manager with a new architecture based on Plug'n'Play (PnP). This enables faster, lighter, and deterministic dependency management.

Why use Yarn Berry?

Yarn Berry offers several advantages:

  • Faster dependency management: With the PnP architecture, Yarn Berry avoids costly dependency installations and resolutions, resulting in faster build and startup times for your application.

  • Deterministic dependency resolution: Yarn Berry ensures installation reproducibility by using a dependency resolution algorithm based on strict rules. This means each team member gets exactly the same dependency versions during installation.

  • Simplified version management: Yarn Berry makes it easy to update and lock dependency versions through simple commands and built-in tools.

Rome - Linter and Formatter

This project uses Rome as the linter and formatter to maintain code quality. Rome is a development tool for JavaScript and TypeScript that provides advanced static analysis, linting, and formatting features.

What is Rome?

Rome is an integrated toolchain for JavaScript and TypeScript development. It offers a modern approach to project management, providing features such as linting, formatting, compilation, and more.