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.

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

• favicon.ico, *.png - favicon and application icon files.

• site.webmanifest - The PWA manifest file.

• vercel.svg - The Vercel logo that 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

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