> For the complete documentation index, see [llms.txt](https://nextjs-starter.gitbook.io/nextjs-webapp-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextjs-starter.gitbook.io/nextjs-webapp-starter/folder-structure.md).

# Folder Structure

After creation, your project should look like this:

```
├── .github
|   ├── contributing.md
├── __tests__
|   ├── Home-es.test.tsx
|   ├── Home-fr.test.tsx
|   ├── Home.test.tsx
├── config
|   ├── i18n
│   │   ├── config.ts
|   ├── jest
│   │   ├── cssTransform.js
│   │   ├── test-utils.tsx
|   ├── seo
│   │   ├── next-seo.config.ts
|   ├── app.config.ts
├── public
│   ├── locales
|   |   ├── en
|   |   |   ├── common.json
|   |   |   ├── footer.json
|   |   |   ├── header.json
|   |   |   ├── index.json
|   |   ├── es
|   |   |   ├── common.json
|   |   |   ├── footer.json
|   |   |   ├── header.json
|   |   |   ├── index.json
|   |   ├── fr
|   |   |   ├── common.json
|   |   |   ├── footer.json
|   |   |   ├── header.json
|   |   |   ├── index.json
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── site.webmanifest
│   ├── vercel.svg
├── src
|   ├── components
│   │   ├── layout
|   |   |   ├── Footer.tsx
|   |   |   ├── Header.tsx
|   |   |   ├── WebApp.tsx
│   │   ├── App.tsx
│   ├── i18n
│   │   ├── create-provider
|   |   |   ├── browser.tsx
|   |   |   ├── index.tsx
|   ├── lib
│   │   ├── types.ts
│   │   ├── utils.ts
│   ├── pages
│   │   ├── [lng]
|   |   |   ├── index.tsx
│   │   ├── api
|   |   |   ├── hello.ts
│   │   ├── 404.tsx
│   │   ├── _app.tsx
│   │   ├── _document.tsx
│   │   ├── _error.tsx
│   │   ├── index.tsx
├── styles
|   ├── Footer.module.scss
│   ├── Header.module.scss
|   ├── Home.module.scss
│   ├── index.css
├── .babelrc
├── .editorconfig
├── .env.development
├── .env.production
├── .gitignore
├── CODE_OF_CONDUCT.md
├── README.md
├── changelog.md
├── jest.config.js
├── license.md
├── next-env.d.ts
├── next.config.js
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.json
└── yarn.lock
```

The purpose of each of these files and folders are as follows:

### .github

This folder simply contains the project's [Contributing Guide](https://github.com/owanhunte/nextjs-webapp-starter/blob/release/.github/contributing.md).

### \_\_tests\_\_

This folder should contain all tests written. Currently unit tests are provided for each localized version of the template's index page.

### config

Stores configuration files for most of the starter template's features:

* **i18n/config.ts** - Used by our react-i18next integration. You should not modify this file to customize the configuration for your app, instead you should modify app.config.ts.
* **jest/cssTransform.js** - Used by our Jest setup to transform .css files.
* **jest/test-utils.tsx** - Loaded by each test file to set up the testing framework before each test.
* **seo/next-seo.config.ts** - Configuration file pulled in by our Next SEO integration. You should not modify this file to customize the configuration for your app, instead you should modify app.config.ts.

### public

Stores the following **image** and **json** assets:

* **locales** - Contains sub-folders for each locale configured for the app, which in turn contain the locale translation files. This is an example of how to configure translation files to leverage `i18next's` Namespaces feature, more of which you can learn about [here](https://www.i18next.com/principles/namespaces).
* **favicon.ico, \*.png** - favicon and application icon files.
* **site.webmanifest** - The PWA manifest file.
* **vercel.svg** - The Vercel logo that [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) gives us, unaltered.

### src

This is where the custom components, pages, Context API providers, typings and utility code for the project live.

* [Page components](/nextjs-webapp-starter/page-components/custom-app.md)
* Non-page components

### styles

Stores the app's global CSS and CSS/SCSS module files. Feel free to look around at these files to see how easy it is to leverage the Tailwind CSS support integrated with this starter template. Modify/replace the files to suit the needs of your app.