This is a starter web application template built with Next.js framework for the frontend, and Directus as a headless CMS for the backend. It features internationalization, a component-based architecture inspired by Digest.club, and a comprehensive testing suite using Vitest for unit tests and Playwright for end-to-end tests. The user interface is built with Tailwind CSS and Radix UI.
Next.js frontend
- Bootstrap next project with
create-next-app - Internationalization
- App Router setup with i18n routing
- next-intl example app
- Translate i18next JSON resources/files
- How to set up Next.js for production
- Vitest tests
- Playwright end-to-end tests
- Tailwind CSS
- Radix UI
- Radix Icons
Directus backend
- Directus Next.js example
- Directus page components
- Directus JavaScript SDK
- Using Directus Auth with NextAuth.js
- Using Directus Auth in Next.js
Inspiration for the architecture and components comes from Digest.club application
Next
- page.tsx files are used to define a specific routes for the application and typically exports a React component that represents the content of that page
- layout.tsx files applies a layout for the current and all subfolders pages.tsx files
Directus
- requests are made from Next.js on server side, not from client side
This project require the following to get started:
- Node.js v22.19 (lts/jod)
- A directus instance see my directus-project
git clone https://github.com/marsender/next-project.git
cd next-project
npm installnano .env.local
nano .env.test.localnpm run devnpm run build
npm run startnpm run lint
npm run lint:fix # to fix lint errors
npm run type-checknpm run knipCopy env and adjust
cp .env.test .env.test.localVitest tests
npm testVitest coverage
npm run coveragePlaywright end-to-end tests
npm run test:e2e # Console tests
npm run test:e2e:ui # UI tests