This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Testing

run the test using this command

npx playwright test

Tests are run in headless mode meaning no browser will open up when running the tests. Results of the tests and test logs will be shown in the terminal.

Run your tests with UI Mode

npx playwright test --ui

Test Reports

npx playwright show-report

Running a single test file

npx playwright test landing-page.spec.ts

you can check playwright docs running tests here

I18next Configuration

-i18n.js - Contains the i18next configuration settings.

-locales/ - Directory containing translation files for each supported language.

en/ - English translations (example: common.json, page1.json, etc.). ar/ - arabic translations (example: common.json, page1.json, etc.). Add more language directories as needed.

• You can also add files for each page you want in the ar/en folders

├── locales/ │ │ ├── en/ │ │ │ ├── common.json │ │ │ ├── header.json │ │ │ └── footer.json │ │ ├── ar/ │ │ │ ├── common.json │ │ │ ├── header.json │ │ │ └── footer.json │ │ |

• When you add new file you should import it in the place you are using in the getStaticProps and in the useTranslation ( it should be written as an array [] )

const { t } = useTranslation(['common','header','footer']) export const getStaticProps: GetStaticProps = async ({ locale, }) => ({ props: { ...(await serverSideTranslations(locale ?? 'en', [ 'common','header','footer' ])), }, })

-Use i18next's useTranslation hook to access translations in your components

const { t, i18n } = useTranslation('common')

-When you have nested json file for example this json : { "header": { "home": "Home", "about": "About", "contact": "Contact", "language": "Language", "selectLanguage": "Select Language" }, }

you are goinig to call it for translation like this

{t('header.home')}

-Use understanable words and sentences for the tranlations files