🥪Boilerplate Structure

Boilerplate code means a piece of code which can be used over and over again.This is a description of each folder or file.

Folder/File
Description

__test__

Accommodate all unit test needs using jest, which includes snapshot tests, logic testing etc.

.next

Place for rendering the next.js file in development or production mode.

public

Serve static files, like images, robot SEO, fonts, manifest json, etc. under a folder called public in the root directory. Files inside public can then be referenced by your code starting from the base URL (/).

fonts (Collection font type)

images

  • icons (Images for icon)

  • logo (Images for logo)

  • media (Images for common)

locales (Language variants data)

manifest-example.json (manifest data)

robots-example.txt (robots web for support Google robots).

src

Special folder to hold all files related to development process.

components (All components app)

  • global (Reusable components local custom)

  • page (Partial components for high order component from page)

hooks (Collections of custom hooks)

html (All HTML code)

layouts (Layout types app)

  • CustomizedLayout (Customized layout type)

  • DashboardLayout (Dashboard layout type)

  • LandingLayout (Landing layout type)

  • MobileLayout (Mobile view layout type)

pages (Routing system next.js. Each page is associated with a route based on its file name.)

  • api (Mock dummy API)

  • _app.js (Next.js uses the App component to initialize pages)

  • _document.js (A custom Document is commonly used to augment your application's <html> and <body> tags.)

  • index.js (Index page Next.js app)

store (Handle state management system)

styles (Custom styles configs)

  • global (global stylesheet)

  • reset (reset stylesheet)

  • override (custom & override CSS framework)

utils (Handle all utility code like as helpers code)

.env-example

File that is used to store environment variables for an application.

.eslintrc.json

File used by ESLint, which is a popular JavaScript linter tool.

.gitignore

File used in Git repositories to specify files and directories that should be ignored by Git.

CHANGELOG.md

File that lists and describes the changes made to a software project in each version release.

CONTRIBUTING.md

File that provides guidelines for individuals or organizations who want to contribute to an open-source project.

jest.*.js

File used in Jest projects to customize the default behavior of the Jest testing framework.

next.config.js

File used in Next.js projects to customize the default behavior of the Next.js framework.

package.json

File used in Node.js projects to store metadata about the project, such as its name, version, dependencies, scripts, and other information.

README.md

File in the root directory of a software project that provides documentation and information about the project.

tsconfig.json

File for TypeScript projects that specifies the compiler options and other settings used to compile TypeScript code into JavaScript.

yarn.lock

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.

Last updated