# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://nextjs-starter.gitbook.io/nextjs-webapp-starter/folder-structure.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.