# Boilerplate Structure

<table><thead><tr><th width="207">Folder/File</th><th>Description</th></tr></thead><tbody><tr><td>__test__</td><td>Accommodate all unit test needs using jest, which includes snapshot tests, logic testing etc.</td></tr><tr><td>.next</td><td>Place for rendering the next.js file in development or production mode.</td></tr><tr><td>public</td><td><p>Serve static files, like images, robot SEO, fonts, manifest json, etc. under a folder called <code>public</code> in the root directory. Files inside <code>public</code> can then be referenced by your code starting from the base URL (<code>/</code>).</p><p></p><p><strong>fonts</strong> (<em>Collection font type</em>)</p><p><strong>images</strong></p><ul><li>icons (<em>Images for icon</em>)</li><li>logo (<em>Images for logo</em>)</li><li>media (<em>Images for common</em>)</li></ul><p><strong>locales</strong> <em>(Language variants data)</em></p><p><strong>manifest-example.json</strong> (<em>manifest data</em>)</p><p><strong>robots-example.txt</strong> (<em>robots web for support Google robots</em>).</p></td></tr><tr><td>src</td><td><p>Special folder to hold all files related to development process. <br></p><p><strong>components</strong> (<em>All components app</em>)</p><ul><li>global (Reusable <em>components local custom</em>)</li><li>page (<em>Partial components for high order component from page</em>)</li></ul><p><strong>hooks</strong> (Collections of c<em>ustom hooks</em>)</p><p><br><strong>html</strong> <em>(All HTML code)</em><br></p><p><strong>layouts</strong> (<em>Layout types app</em>)</p><ul><li>CustomizedLayout (<em>Customized layout type</em>)</li><li>DashboardLayout (<em>Dashboard layout type</em>)</li><li>LandingLayout (<em>Landing layout type</em>)</li><li>MobileLayout (<em>Mobile view layout type</em>)</li></ul><p></p><p><strong>pages</strong> (<em>Routing system next.js. Each page is associated with a route based on its file name.</em>)</p><ul><li>api (<em>Mock dummy API</em>)</li><li>_app.js (<em>Next.js uses the App component to initialize pages</em>)</li><li>_document.js (<em>A custom <code>Document</code> is commonly used to augment your application's <code>&#x3C;html></code> and <code>&#x3C;body></code> tags.</em>)</li><li>index.js (<em>Index page Next.js app</em>)</li></ul><p><strong>store</strong> (<em>Handle state management system</em>)<br></p><p><strong>styles</strong> (<em>Custom styles configs</em>)</p><ul><li>global (<em>global stylesheet</em>)</li><li>reset (<em>reset stylesheet</em>)</li><li>override (<em>custom &#x26; override CSS framework</em>)</li></ul><p><strong>utils</strong> (<em>Handle all utility code like as helpers code</em>)</p></td></tr><tr><td>.env-example</td><td>File that is used to store environment variables for an application.</td></tr><tr><td>.eslintrc.json</td><td>File used by ESLint, which is a popular JavaScript linter tool.</td></tr><tr><td>.gitignore</td><td>File used in Git repositories to specify files and directories that should be ignored by Git.</td></tr><tr><td>CHANGELOG.md</td><td>File that lists and describes the changes made to a software project in each version release.</td></tr><tr><td>CONTRIBUTING.md</td><td>File that provides guidelines for individuals or organizations who want to contribute to an open-source project.</td></tr><tr><td>jest.*.js</td><td>File used in Jest projects to customize the default behavior of the Jest testing framework.</td></tr><tr><td>next.config.js</td><td>File used in Next.js projects to customize the default behavior of the Next.js framework.</td></tr><tr><td>package.json</td><td>File used in Node.js projects to store metadata about the project, such as its name, version, dependencies, scripts, and other information.</td></tr><tr><td>README.md</td><td>File in the root directory of a software project that provides documentation and information about the project.</td></tr><tr><td>tsconfig.json</td><td>File for TypeScript projects that specifies the compiler options and other settings used to compile TypeScript code into JavaScript.</td></tr><tr><td>yarn.lock</td><td>File used by the Yarn package manager to ensure that all developers and machines working on a project use the same version of every dependency.</td></tr></tbody></table>
