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

.vscode

Default script running for debugging using Visual Studio Code (VS Code)

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)

img

  • bg (Images for background element)

  • errors (Images for errors page)

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

  • common (Components local custom)

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

config (Collect APIs, constant files etc)

  • apis (Collection API list)

  • constants (Collection constants variables)

hooks (Coming soon)

html (All HTML code)

layouts (Layout types app)

  • dashboard (Dashboard layout type)

  • landing (Landing layout type)

  • mobile (Mobile view layout type)

lib (3rd party configs)

  • firebase (Firebase configs)

  • jest (Unit testing configs)

  • redux (State management configs)

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

  • 404.js (Error page for not found page)

  • 500.js (Error page for internal server error)

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

store (Handle state management system)

styles (Custom styles configs)

  • global (global stylesheet configs)

  • override (custom & override CSS framework)

utils (Handle all utility code like as helpers code)

.env-example

Default sample for env configs

.gitignore

Plain text file where each line contains a pattern for files/directories to ignore.

jest.config.js

Jest's configuration files project

jsconfig.json

File specifies the root files and the options for the features provided by the JavaScript language service. There are alias path configuration.

next.config.js

NextJS's configuration files project

package.json

JSON file that exists at the root of a Javascript/Node project.

server.js

Server configuration project

PreviousInstallationsNextNext.js Features

Last updated

Was this helpful?