Folder Structure
vexel/
├── node_modules
├── pages/
| ├── api
| | ├── hello.ts
| ├── components/
| ├── _app.tsx
| ├── _document.tsx
| └── index.tsx
├── public/
| ├── assets/
| ├── favicon.ico
| ├── next.svg
| └── vercel.svg
├── shared/
| ├── data/
| ├── firebase/
| ├── layout-components/
| ├── backtotop/
| ├── footer/
| ├── header/
| ├── landingswitcher/
| ├── layout/
| ├── authenticationlayout.tsx
| ├── contentlayout.tsx
| └── landingpagelayout.tsx
| ├── loader/
| ├── pageheader/
| ├── seo/
| ├── sidebar/
| └── switcher/
| ├── redux/
| └── showcode/
├── styles/
| ├── globals.scss
| └── Home.module.scss
├── .eslintrc.json
├── .gitignore
├── next-env.d.ts
├── jsconfig.json
├── next.config.js
├── package.json
├── plugin.d.ts
├── README.md
└── tsconfig.json
# |
File |
Purpose |
|
node_modules |
Node.js creates this folder and puts all third party
modules listed in package.json inside of it.
|
|
pages |
Pages folder is having all routing components and layout congregations. Next.js will route the component by using the Pages folder.
|
|
_app.tsx |
The first file that will be rendered is _app.js, where we will place the layout congregations.
|
|
assets |
A folder where you can put images, css, json data
anything else to be copied wholesale when you build
your application.
|
|
layout |
This layout folder contains all the different types of layouts which we used in the project.
|
|
globals.scss |
Your global styles go here. Most of the time you'll
want to have local styles in your components for
easier maintenance, but styles that affect all of your
app need to be in a central place.
|
|
.gitignore |
Git configuration to make sure autogenerated files are
not commited to source control.
|
|
package.json |
npm configuration listing the third party packages
your project uses. You can also add your own custom
scripts here.
|
|
README.md |
Basic documentation for your project, pre-filled with
CLI command information. Make sure to enhance it with
project documentation so that anyone checking out the
repo can build your app!
|