Example workflow

In this tutorial you build a small presentation site, then add an About page to it, with a team section, a custom component, an icon and a German translation. Along the way you use almost every aarshi command.

1. Create the project

aarshi setup portfolio --languages fr,en --default-language fr --yes
cd portfolio

aarshi creates the Next.js project, installs the dependencies and writes aarshi.toml. French is the default language: / redirects to /fr.

2. Add a page

aarshi add -p about

aarshi creates three things for the page:

• views/about/about.view.tsx, the view that shows the page;
• app/[locale]/about/page.tsx, the route, which serves /fr/about and /en/about;
• an entry in app/sitemap.ts, so search engines find it.

It also adds the key "about.title" to lib/i18n/dictionaries/fr.ts and en.ts, with an empty value. Fill them in:

// lib/i18n/dictionaries/fr.ts
"about.title": "À propos",

// lib/i18n/dictionaries/en.ts
"about.title": "About",

3. Add a section with a menu

A section is a block of the page. Type the command without any argument:

aarshi add

1. Choose Section in the first menu.
2. Type the name team.
3. In the page menu, choose about.

aarshi creates views/about/sections/team.tsx, adds it to the view, and adds "about.team.title" to both dictionaries. Fill it in as before, for example "Notre équipe" and "Our team".

4. Add a custom component

aarshi add -c member-card

This creates components/custom/member-card.tsx, a starter component you can use in the section. The component is yours: aarshi never changes it afterwards.

5. Convert an icon

Save an icon exported from your design tool as components/icons/logo.svg, then run:

aarshi icons --all

aarshi writes components/icons/logo.tsx, a React component with the same drawing. Import it like any component.

6. Add a German translation

aarshi add-lang de

aarshi creates lib/i18n/dictionaries/de.ts with every key of the default dictionary, all empty, and adds de to the languages. The site is now also served under /de, but its texts are still empty. Fill them in: "about.title": "Über uns",, and so on for each key.

7. Check the project

aarshi status

Until every value is filled, aarshi status lists the empty ones as todo in the i18n section. Those are not errors: the exit code stays 0. Once all the values are filled, the report ends with ✓ project is conformant.

If you want to see only what matters, run aarshi status --errors-only.

8. Look at the result

npm run dev

Open http://localhost:3000/fr/about, then /en/about and /de/about. The language switcher in the header changes the language of the current page.

What you did

You wrote the texts and the design. aarshi wrote the files that connect them: the folders, the routes, the sitemap and the dictionary keys, which the compiler checks against the default language.