Next-project

This is a Next.js project with Directus backend

Next.js

• 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
• Radix UI
• Shadcn UI

Directus

• Directus Next.js example
• Directus page components
• Directus JavaScript SDK
• Using Directus Auth with NextAuth.js
• Using Directus Auth in Next.js

Architecture

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

Requirements

This project require the following to get started:

• Node.js v22.14 (lts/jod)
• A directus instance

Install

git clone https://github.com/marsender/next-project.git
cd next-project
npm install

Adjut env for dev and test

nano .env.local
nano .env.test

Build for dev

npm run dev

Build for prod

npm run build
npm run start

Lint code

npm run lint
npm run lint:fix # to fix lint errors
npm run type-check

Run tests

Copy env and adjust

cp .env.test .env.test.local

Vitest tests

npm test

Vitest coverage

npm run coverage

Playwright end-to-end tests

npm run test:e2e # Console tests
npm run test:e2e:ui # UI tests