Documentation
Bayone - Multipurpose & Creative React/Nextjs Portfolio Template
Bayone is a React/Nextjs creative & modern portfolio template, A perfect place for your creative portfolio. Multiple demoes are included in this template with lots of CSS and React animations, Responsive based on Bootstrap 5.
- Version: 1.0
- Author: ThemesCamp
- Created: 31 Jul, 2023
- Update: 31 Jul, 2023
If you have any questions that are beyond the scope of this help file, Please feel free to contact us via ThemesCamp.
Features
- Build on Next.js 13 (app router)
- Based on Bootstrap 5
- Based On SCSS
- Creative layouts
- 100% Responsive
- Easy to Customize
- Minimal and Clean
- Fonts Awesome Icons
- Well Documentation
- Free Updates
- All files are well commented
- Displays well in all modern browsers
Files Include
bayone_nextjs Folder
Folder contains main template code & all jsx
, json
,
scss
, css
, images
, fonts
, js
files
bayone_nextjs_docs Folder
Documentation folder of "bayone nextjs" written in html
css
Installation
Follow the steps below to setup your template:
- Download the latest theme source code from the Marketplace.
-
Download and install Node.js and npm from Nodejs. The suggested version to install is
LTS
. -
Open terminal in bayone_nextjs template folder.
> cd /bayone_nextjs/
-
Install npm packages.
You must have to install packages of your project to install all the necessary
dependencies, You can do this by running the following command.
> npm install
Run Development Server
Start your app development server to change, update and customize your app.
Run npm run dev
in the terminal from the root of your project to start a dev server
> npm run dev
Navigate to http://localhost:3000 to see your app, the app will automatically reload if you change any of the source files.
This template built with the new nextjs App Router
Build For Production
Build the app for production and make it ready for deployment, next build
generates an optimized version of your application for production
This template built with the new nextjs App Router
# Static and Dynamic Rendering
In Next.js, a route can be statically or dynamically rendered.
In a static rendering, components are rendered on the server at build time. The result of the work
is
cached and reused on subsequent requests (as normal HTML).
In a dynamic rendering, components are rendered on the server at request time.
# For Static Rendering (Default)
Configure static output in next.config.js
file,
// Set output property to 'export' in nextConfig
const nextConfig = {
output: 'export'
}
Run npm run build
to build the project for production.
> npm run build
The exported HTML will be stored in /out
directory.
* allows you to export your Nextjs template to static HTML, which can be run standalone
without the need of a Node.js server.
# For Dynamic Rendering
Remove output property from next.config.js
file,
// Remove output property from in nextConfig
const nextConfig = {
output: 'export'
}
Run npm run build
to build the project for production.
> npm run build
The build artifacts will be stored in the /.next/
directory.
Deployment
You can deploy your project to any static hosting or a hosting provider that supports Node.js
We suggest some hosting you can consider to use:
Folder Structure
Bayone comes with a flexible file structure that can be easily used for small to large scope projects. This section will explain the entire file structure and how to adapt it to your project.
Root Folder
[root_folder]
folder contains the whole project folders & files
Root Folder Content:
File/Folder | Description |
---|---|
public |
Next.js public folder that can serve static files which files inside it can then be referenced by
your code starting from the base URL "/" , like images, fonts and vendors. |
src |
The source folder that contains all template source files like Pages, Components, Data, SCSS, Javascript and media files. Required only for development and can be excluded for production. |
node_modules |
A directory created by npm and a way of tracking each packages you install locally via package.json |
.next |
A directory created by next.js during build time to be the destination folder that contains the compiled html and assets. |
.eslintrc |
Config file format for ESLint |
next.config.js |
A regular Node.js module, not a JSON file. It gets used by the Next.js server for custom advanced configuration of Next.js and build phases, and it's not included in the browser build |
jsconfig.json |
It's a configuration file to assist your editor with the JavaScript usage in your project folder. It's most commonly used to include/exclude folders in your intellisense, and map aliases in your source code to certain folders. |
package.json |
Includes the list of dependencies to install from npm |
Src Folder
[root_folder]/src/
source folder that contains all template source files.
Styles folder doesn't contains the main project styles, it contains overrides styles for some 3rd party packages.
App Folder
[root_folder]/src/app
folder contains template pages & layouts files.
Folders content:
/creative-portfolio
page.js
/creative-agency
page.js
/(inner-pages)/blog-details
page.js
/(portfolio)/portfolio-grid-classic
page.js
...
Each page.js
file is a react component which associated with a route based on its containing
folder name.
Learn more about Next.js
app routing
Components Folder
[root_folder]/src/components
folder contains template components that imported and used in
pages.
Components folders are grouped together according to the pages with same style or specific page
components.
e.g. AgencyPortfolio
Folder contains all the components of Agency Portfolio page
/CreativeAgency
Header.jsx
//= CreativeAgency Page Header Component
Services.jsx
//= CreativeAgency Page Services Component
...
/About
Header.jsx
//= About Page Header Component
...
...
Data Folder
[root_folder]/src/data
folder contains static app data in json
format.
Each folder contains static data for page components stored in
JSON
format.
blog.json
//= Blog Data
portfolio.json
//= Portfolio Data
...
Each file contains JSON
data that imported and rendered on it's component.
Common Folder
[root_folder]/src/common
folder contains common helper functions.
Each file is JavaScript
function that is commonly used in project
components.
Code Structure
Main template components code structure
Root Layout
[root_folder]/src/app/layout.js
React component that contains app layout.
// src/app/layout.js
//= Global Styles
import "@/styles/globals.css";
export const metadata = {
title: 'Bayone',
description: 'Bayone - Multi-Purpose React.js Next.js Template',
keywords: ['HTML5', 'Template', 'Bayone', 'Multi-Purpose', 'themeforest'],
icons: {
icon: "/assets/imgs/favicon.ico",
shortcut: "/assets/imgs/favicon.ico"
},
}
export default function RootLayout({ children }) {
return (
<html lang="en">
{children}
</html>
)
}
Layout component wraps pages content and contains specific
configurations such as common and shared components
, styles
or
scripts
.
@/styles
in the
imports refers to the src/styles folder, you can find paths configurations in
jsconfig.json file in the root directory.
Page
[root_folder]/src/app/[page_folder]/page.js
React component that contains a page code.
// ./src/app/page.js
import Script from "next/script";
//= Scripts
import generateStylesheetObject from '@/common/generateStylesheetsObject';
//= Common Components
import LoadingScreen from "@/components/Common/Loader";
import Cursor from "@/components/Common/Cursor";
import ProgressScroll from "@/components/Common/ProgressScroll";
//= Page Components
import Navigation from "@/components/Preview/Navigation";
import Header from "@/components/Preview/Header";
import Portfolio from "@/components/Preview/Portfolio";
import Footer from "@/components/Preview/Footer";
export const metadata = {
title: 'Bayone - Preview',
icons: {
icon: "/assets/imgs/favicon.ico",
shortcut: "/assets/imgs/favicon.ico",
other: generateStylesheetObject([
'/assets/fonts/mona-sans/style.css',
'/assets/css/plugins.css',
'/assets/css/style.css',
'/landing-preview/css/preview-style.css'
])
}
}
export default function LandingPreview() {
return (
<body className="main-bg">
<LoadingScreen />
<Cursor />
<ProgressScroll />
<div id="smooth-wrapper">
<div id="smooth-content">
<Navigation />
<main>
<Header />
<Portfolio />
</main>
<Footer />
</div>
</div>
<Script src="/assets/js/bootstrap.bundle.min.js" strategy="beforeInteractive" />
<Script src="/assets/js/plugins.js" strategy="beforeInteractive" />
<Script src="/assets/js/isotope.pkgd.min.js" strategy="beforeInteractive" />
<Script src="/assets/js/wow.min.js" strategy="beforeInteractive" />
<Script src="/assets/js/gsap.min.js" strategy="beforeInteractive" />
<Script src="/assets/js/ScrollSmoother.min.js" strategy="beforeInteractive" />
<Script src="/assets/js/ScrollTrigger.min.js" strategy="beforeInteractive" />
<Script src="/assets/js/smoother-script.js" strategy="lazyOnload" />
<Script src="/assets/js/scripts.js" strategy="lazyOnload" />
</body>
)
}
@/components
in the
imports refers to src/components
folder, you can find paths configurations in
jsconfig.json file in the root directory.
Component
[root_folder]/src/components/[component_folder]/[Component].jsx
React component contains
part of a
page code.
// ./src/components/CreativeAgency/Services.jsx
import React from 'react';
//= Static Data
import data from '@/data/CreativeAgency/services.json';
function Services() {
return (
<section className="services-box">
<div className="container">
<div className="row">
{data.map(item => (
<div className="col-lg-3 col-md-6 item" key={item.id}>
<span className="icon-img-60 mb-40">
<img src={item.icon} alt="" />
</span>
<h5 className="fz-22">{item.title}</h5>
<p>{item.description}</p>
<a href={item.link} className="link-more animsition-link mt-50">
<span className="text">Read More</span>
<span className="arrow">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.922 4.5V11.8125C13.922 11.9244 13.8776 12.0317 13.7985 12.1108C13.7193 12.1899 13.612 12.2344 13.5002 12.2344C13.3883 12.2344 13.281 12.1899 13.2018 12.1108C13.1227 12.0317 13.0783 11.9244 13.0783 11.8125V5.51953L4.79547 13.7953C4.71715 13.8736 4.61092 13.9176 4.50015 13.9176C4.38939 13.9176 4.28316 13.8736 4.20484 13.7953C4.12652 13.717 4.08252 13.6108 4.08252 13.5C4.08252 13.3892 4.12652 13.283 4.20484 13.2047L12.4806 4.92188H6.18765C6.07577 4.92188 5.96846 4.87743 5.88934 4.79831C5.81023 4.71919 5.76578 4.61189 5.76578 4.5C5.76578 4.38811 5.81023 4.28081 5.88934 4.20169C5.96846 4.12257 6.07577 4.07813 6.18765 4.07812H13.5002C13.612 4.07813 13.7193 4.12257 13.7985 4.20169C13.8776 4.28081 13.922 4.38811 13.922 4.5Z"
fill="currentColor"></path>
</svg>
</span>
</a>
</div>
))}
</div>
</div>
</section>
)
}
export default Services
Data
[root_folder]/src/data/[data_folder]/[data_file].json
JSON file stores component data.
// src/data/CreativeAgency/services.json
[
{
"id": 1,
"icon": "/assets/imgs/serv-icons/0.png",
"title": "Digital Marketing",
"description": "Brand identity design is the key to success whether you breathe rebranding.",
"link": "/about"
},
{
"id": 2,
"icon": "/assets/imgs/serv-icons/1.png",
"title": "Brand Strategy",
"description": "Brand identity design is the key to success whether you breathe rebranding.",
"link": "/about"
},
{
"id": 3,
"icon": "/assets/imgs/serv-icons/2.png",
"title": "SEO Optimization",
"description": "Brand identity design is the key to success whether you breathe rebranding.",
"link": "/about"
},
{
"id": 4,
"icon": "/assets/imgs/serv-icons/0.png",
"title": "Content Creation",
"description": "Brand identity design is the key to success whether you breathe rebranding.",
"link": "/about"
}
]
Source & Credits
Images:
- Pexels - https://pexels.com
- Unsplash - https://unsplash.com
Images are only for demo purpose and not included with the download bundle.
Fonts:
- Poppins - https://fonts.google.com/specimen/Poppins
- Mona Sans - https://github.com/github/mona-sans
Scripts:
- Next.js 13 - https://nextjs.org
- React.js - https://reactjs.org
- Bootstrap 5 - http://getbootstrap.com
- Swiper Carousel - https://swiperjs.com
- GSAP Animations - https://greensock.com/gsap
Thank you for purchased bayone template
We truly appreciate and really hope that you'll enjoy our template!,
If you like our template, plase rate us 5 star !