Project README

Live Preview: https://static-next-test.netlify.app

🔧 Prerequisites

Ensure that Node.js v20 and Bun are installed on your machine. Node.js v20 provides the latest features and optimizations, while Bun is chosen for its speed in JavaScript runtime, making it an efficient tool for both development and production.

🚀 Getting Started

To begin, install the project dependencies:

bun install

Next, start the development server:

bun dev

Open http://localhost:3000 in your browser to view the project.

To build the project for production and serve the static files, run:

bun build
bun start

📖 Setup Documentation

⚙️ Framework

This project is built using Next.js, a React framework that offers features like server-side rendering and static site generation. The project was initialized with create-next-app to provide a solid starting point with sensible defaults.

🎨 Formatting & Linting

For code consistency and quality, the project employs Prettier for formatting and ESLint for linting. These tools are configured based on the official Next.js documentation to ensure adherence to best practices and maintainable code.

You can manually run these tools with:

bun run lint
# or
bun run format

🪝 Commit Hooks

To maintain code quality and consistency in commits, we have set up Husky and lint-staged. These tools ensure that linting and formatting checks are automatically applied before each commit via a pre-commit hook.

Additionally, we enforce the Conventional Commits standard using commitlint in a commit-msg hook. This helps in maintaining a clear and structured commit history.

🧪 Testing

Unit tests are implemented using Vitest, as recommended by the Next.js documentation. This setup allows for efficient and reliable testing of both server and client components.

To run the tests, use:

bun run test
bun run test:coverage

Important

'Since async Server Components are new to the React ecosystem, Vitest currently does not support them. While you can still run unit tests for synchronous Server and Client Components, we recommend using an E2E tests for async components.'

See docs.

End-to-End (E2E) tests are configured with Playwright, following best practices outlined in the Next.js documentation.

Run E2E tests with:

bun run e2e

🌎 Internationalization (i18n)

There are several i18n packages available for Next.js, each offering similar approaches to localization. Some configurations can be found in branches such as i18n-custom, i18n-next-i18n, and i18n-next-international. The most popular choice, next-i18next, is implemented in the main branch, following this detailed guide.

For route-based localization, a middleware is typically required to dynamically reroute users. However, since static exports do not support middleware, we follow an alternative approach. This involves explicit rerouting from paths, as outlined in this guide, and handling redirects in not-found.tsx by prefixing paths with the appropriate locale.

Important

This doesn't work when running the dev server, but only when starting a static build.

✨ Styling & Components

Styling is achieved using Tailwind CSS, chosen for its utility-first approach that streamlines the development process. Tailwind provides robust theming capabilities through CSS variables, ensuring a consistent and easily customizable design system.

To build a reusable component library, we utilize shadcn/ui, which allows for the rapid creation of accessible and visually appealing components. This approach, in contrast to traditional component libraries, gives us full ownership and flexibility over our components, enabling us to tailor them precisely to our needs.