# Next Page setup

The folder hierarchy inside the `app` directory represents the pages of your application, as managed by Next.js.

To ensure consistency in page creation, let's establish some conventions and helpers.

## Meta titles with application name

For **accessibility** and **SEO**, every page should have a unique title that ends with the application name.

By convention each location in the page title should be **separated with `-`** and the **application name should always appear at the end**.

For example, if the application name is "Next Stack":
- The **login page title** should be: `Login | Next Stack`
- The **admin user page for "Minova"** should be: `Admin - Users - Minova | Next Stack`

### Storing the application name in .env file

To avoid hardcoding the application name in every page, store it in an `.env` file.

1. Add the following to `.env.example`:

NEXT_PUBLIC_APP_NAME="Next Stack"

2. If `.env` file does not exist, create it by copying `.env.example`:

cp .env.example .env

Or manually add the same variable inside `.env`.

Then lets create `.env` if it does not exist yet by copy-pasing `.env.example` file or just add `NEXT_PUBLIC_APP_NAME="Next Stack"` in `.env` file if it already exists.

> ⚠️ `.env` should **NEVER** be tracked in Git.
The `.env.example` file is meant to help set up local environments quickly but should **NEVER** contain sensitive data.

### Using the application name in page titles

By default, a page title is defined like this in `app/organizations/page.tsx`:

export const metadata: Metadata = {
  title: 'Organizations | Next Stack'
};

Repalce hardcoded app name with `Next Stack` with `NEXT_PUBLIC_APP_NAME`:

export const metadata: Metadata = {
  title: `Organizations | ${process.env['NEXT_PUBLIC_APP_NAME']}`
};

Using an array makes it easier to manage nested page titles:

export const metadata: Metadata = {
  title: ['Organizations', process.env['NEXT_PUBLIC_APP_NAME']].join(' | ')
};

### Create a page title helper

To simplify title management across the app, create a utility function.

Create the `web` feature folder if it does not exist:

mkdir -p src/features/web

Then create the `app-page-title.util.ts` file:

touch src/features/web/app-page-title.util.ts

Add the following function:

export const appPageTitle = (...pageTitle: string[]): string =>
  pageTitle.length === 0
    ? `${process.env['NEXT_PUBLIC_APP_NAME']}`
    : [pageTitle.join(' - '), process.env['NEXT_PUBLIC_APP_NAME']].join(' | ');

Ensure it's exported in` src/features/web/index.ts`:

touch src/features/web/index.ts
echo "export * from './app-page-title.util';" >> src/features/web/index.ts

Now, update `app/organizations/page.tsx`:

import { appPageTitle } from '@/features/web';

export const metadata: Metadata = {
  title: appPageTitle('Organizations')
};

For subpages, simply add more parameters to `appPageTitle`:

export const metadata: Metadata = {
  title: appPageTitle('Organizations', 'My organization')
};

---

[Next](https://hackmd.io/JZzKYRqRRAe9iIJu1vNYbw)
[Home](https://hackmd.io/9GoEP2IbT6SIJQHOf03PbA)