In this folder , you will find the pages folder of next js and next configuration files. If you want to change something in next js folder , change here .

pages

As we have used next.js , we have a script to your package.json like this:

						{
						    "scripts": {
							"dev": "next -p 7070", 
							"start": "next start",  
							"now-build": "next build && next export -o dist",
							"netlify-build": "next build && next export",
							"firebase-dev": "npm run dev:client & npm run dev:server",
							"firebase-dev:client": "next src/client",
							"firebase-dev:server": "babel src/server --out-dir dist/server --source-maps --watch",
							"firebase-build:client": "next build src/client",
							"firebase-build:server": "babel src/server --out-dir dist/server --source-maps",
							"firebase-build": "npm run build:client && npm run build:server",
							"firebase-preserve": "npm run build",
							"firebase-serve": "cross-env NODE_ENV=production firebase serve --only functions,hosting",
							"firebase-predeploy": "rimraf dist/ && npm run build",
							"firebase-deploy": "cross-env NODE_ENV=production firebase deploy --only functions,hosting"
							}
						}
					

After that, the file-system is the main API. Every .js file becomes a route that gets automatically processed and rendered.
Please have a look at this link https://nextjs.org/docs/ for a quick look. You will understand the basic things so quickly.
As we have Three Product landing pages, three blog pages, four others pages named index, mobile, cycle, blog-grid, blog-list, blog-single, about, team, ratting, product-single so we have ten js files named: index.js for Watch landing Page.
mobile.js for Mobile landing Page.
cycle.js for cycle landing Page.
blog-grid.js for Blog Grid Page.
blog-list.js for Blog List Page.
blog-single.js for Blog-Single Page .
about.js for About Page .
ratting.js for Ratting Page .
team.js for Team Page .
product-single.js for Single-product Page .

After entering to next-landing/src folder, You will find:

1. assets
2. components
3. reusecore
4. sections
5. theme

Now, we will discuss about each and every folders and their tasks .

assets

In assets folder, you will find the data, images folder. In data folder, you will find all of data uses in this template. You will also find the image folder, where all of the images are kept on the basis of the specific page.

components

Here all the Components we use in iProland.

reusecore

reusecore folder is most importantly use, you will find some basic components like Layout, Button, Counter, Navigation etc. We have written these components to make the developer's life easy. Here in details:
Accordion -> By this you can make any Accordion with your own style
Alert -> By this you can make any Alert with your own style
Button -> By this you can make any Button with your own style
Box -> By this you can align any area of block with your own style
Counter -> By this you can make any Counter with your own style
Layout -> Here in Layout all grid system are included
PageHeader -> By this you can make BreadCrumb with your own style
SectionTitle -> By this you can make any SectionTitle with your own style in template
SlickSlider -> By this you can make any slider with your own style in template
By using these basic components, you can write custom components according to your need.

section

After entering to sections folder, You will find:

1. blog
2. common
3. cycle
4. essentialPages
5. mobile
6. watch

theme

In theme folder, you will find all of themeing uses in this template.
Here all themeing elements, we use in iProland.If you need color related customization, you can menage it from here.

After entering to gatsby-landing/src folder, You will find:

1. assets
2. components
3. pages
4. reusecore
5. sections
6. theme

Now, we will discuss about each and every folders and their tasks .

assets

In assets folder, you will find the data, images . In data folder, you will find all of data uses in this template. You will also find the image folder, where all of the images are kept on the basis of the specific page.

components

Here all the Components we use for gatsby in iProland.

in pages folder

							"scripts": {
								"build": "gatsby build",
								"develop": "gatsby develop",
								"dev": "npm run develop",
								"start": "npm run develop",
								"serve": "gatsby serve",
								"clean": "gatsby clean",
								"now-build": "yarn run build",
								"format": "prettier --write \"**/*.{js,jsx,json,md}\""
							}
						

Here all the Components we use in iProland.

reusecore

reusecore folder is most importantly use, you will find some basic components like Layout, Button, Counter, Navigation etc. We have written these components to make the developer's life easy. Here in details:
Accordion -> By this you can make any Accordion with your own style
Alert -> By this you can make any Alert with your own style
Button -> By this you can make any Button with your own style
Box -> By this you can align any area of block with your own style
Counter -> By this you can make any Counter with your own style
Layout -> Here in Layout all grid system are included
PageHeader -> By this you can make BreadCrumb with your own style
SectionTitle -> By this you can make any SectionTitle with your own style in template
SlickSlider -> By this you can make any slider with your own style in template
By using these basic components, you can write custom components according to your need.

section

After entering to sections folder, You will find:

1. blog
2. common
3. cycle
4. essentialPages
5. mobile
6. watch

theme

In theme folder, you will find all of themeing uses in this template.
Here all themeing elements, we use in iProland.If you need color related customization, you can menage it from here.

Gatsby Cloud Deployment for Gatsbay

1. Upload your project into github/gitlab or bit bucket. Make this project private or public whatever you want.
2. Go to gatsby cloud
3. Choose i already have a site and get start
4. Fillout the all available options
5. Select your project repository from github/gitlab
6. You may skip Integrations
7. Then press create site

Vercel Deployment for Nextjs

Install the Vercel CLI

1. npm i -g vercel
2. vercel --prod

Firebase Deployment for Nextjs

1. Init firebasebase and create firbase project into project folder
2. Before we go next delete public/index.html
3. Open .babelrc file in editor and replace this code to module-resolver alias "alias": { "assets": "./src/client/assets", "components": "./src/client/components", "sections": "./src/client/sections", "reusecore": "./src/client/reusecore" }
4. Open firebase.json then replace with this code { "hosting": { "public": "public", "rewrites": [ { "source": "**/**", "function": "nextjs-server" } ] }, "functions": { "source": ".", "ignore": [ ".firebase/**", ".firebaserc", "firebase.json", "**/node_modules/**", "**/public/**" ] } }
5. install yarn add firebase-admin firebase-functions yarn add @babel/core @babel/cli @babel/preset-env cross-env rimraf -dev
6. Open package.json and this code "main": "dist/server/index.js", "engines": { "node": "10" }

   if you face engine related issues then run yarn config set ignore-engines true

7. Create two client and server folder into src/
8. select > pages, > assets, > components, > reusecore, > sections and move into client folder
9. add .babelrc, index.js into src/server/
10. open .babelrc in editor and add this code { "presets": [ [ "@babel/preset-env", { "targets": { "node": "10.15.3" } } ] ] }
11. open index.js in editor and add this code
    import * as admin from "firebase-admin"; import * as functions from "firebase-functions"; import next from "next"; admin.initializeApp(); const dev = process.env.NODE_ENV !== "production"; const app = next({ dev, // the absolute directory from the package.json file that initialises this module // IE: the absolute path from the root of the Cloud Function conf: { distDir: "dist/client" }, }); const handle = app.getRequestHandler(); const server = functions.https.onRequest((request, response) => { // log the page.js file or resource being requested console.log("File: " + request.originalUrl); return app.prepare().then(() => handle(request, response)); }); const nextjs = { server, };
12. Finally run firebase-build firebase-preserve firebase-serve yarn firebase-predeploy yarn firebase-deploy