Before starting any project, it is very important to set a folder structure. It helps us organise our code neatly and makes it easier for the future developers to modify anything in the theme.
Make sure that you go through the explaination of folder structure used in our theme, it will become easier for you to make any modifications. If you want , you could follow our folder structure in you project , that way if you encounter any difficulties in your project , you can refer our theme.
When you unpack downloaded archive from ThemeForest.net you'll get folder containing 2 folders.
Welcome to Next.js! Next.js helps you build modern web applications.
For getting started an Next.js application you needs two things as Prerequisites.
Before you begin, make sure your development environment includes Node and an npm package manager.
Install Node.js using downloaded file
To check your node version, run node -v in a terminal/console window.
CLI (command line interface), and React apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager.
This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window.
For better understanding React we suggest you to once go through official documentation of React from reactjs.org
If you want Friendbook theme setup then directly follow next Friendbook setup section
Run the npm command create-next-app and provide the details:
npx create-next-app@latest
The create-react-app command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key.
Go to the workspace folder (my-app).
cd my-app
Launch the server by using the npm command npm run dev
npm run dev
Build you application for host on server using below command:
npm run build
It will create one .next/static folder in your root directory. This folder contains all the optimized and bundled files for your Next.js app. Make a zip of the .next/static folder. You are now ready to upload your theme to the server.
If you have already download and install node.js then ignore prerequisites accordingly.
You can check it in your terminal window using these commands node --version and
npm --version.
cd Template
.env.local File: Inside your project root directory, create a file named .env.local to store environment variables execute the following command.touch .env.localExample Configuration for Google OAuth: .env.local
NEXTAUTH_SECRET=your_super_secret_key
NEXTAUTH_URL=http://localhost:3000 /* can use any port */
# Google OAuth Credentials
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secretNEXTAUTH_SECRET: A secret key used to encrypt JWT tokens. You can generate a random string using any secret key Open your terminal in mac/linux and enter the following command and it will generates a random 32-character base64-encoded string using OpenSSL:openssl rand -base64 32If your are a Windows user you can generate from here :
NEXTAUTH_URL: This is the URL of your application. During development, it is usually http://localhost:3000 In production, this will be the live domain of your website. app/api/auth/[...nextauth]/authOption.tsx (or .js for JavaScript users) and add your providers. Here's an example using Google:import NextAuth from 'next-auth'
import GoogleProvider from 'next-auth/providers/google'
export default NextAuth({
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
})npm installnpm run devNPM use the package.json file and automatically install the required local dependencies listed in it.
In Friendbook theme, google fonts have been used. google fonts are open source and easy to use. Friendbook have used following fonts:
you can use different google fonts. following are the steps
In Friendbook theme, we have used Unlimited Colors.
To try different color combinations we have provided a color selector so that you could tweak the colors are per your needs and from the theme itself and when you are satisfied with the changed color, you can set the primary and secondary color in the scss file. you need to choose any color and set that css to your html pages in your jsx(see below).
useEffect(() => {
setTimeout(() => {
document.documentElement.style.setProperty("--theme-color","82, 128, 164");
}, 3500);
return () => {
document.documentElement.style.setProperty("--theme-color","3, 137, 201");
};
}, []);Suppose if you don't want other demo except demo which you like then just do below steps:
Friendbook have mainly used FontAwesome Icons. FontAwesome icons
available in
FontAwesome.com/icons,
other icons are available in
assets/images/icon
how to use FontAwesome font
for example:
<i className="fas fa-camera"></i>
<!-- this icon's 1) style prefix == fas and 2) icon name ==
camera -->
<i className="fas fa-camera"></i>
<!-- using an <i> element to reference the icon
-->
<span className="fas fa-camera"></span>
<!-- using a <span> element to reference the icon
-->
how to use Feather Icon
for example:
<DynamicFeatherIcon iconName="MessageSquare" className="iw-16
ih-16"/>
how to use Theme Icon
how to use Animated Weather Icon
how to use Emoji/weather Icon
If you want RTl theme, changes are below:
<!-- Add class rtl in body tag -->
<body class="rtl">
If you want Dark theme, changes are below:
<!-- Add class dark in body tag -->
<body class="dark">
Skeleton screen is a low fidelity UI into which information is gradually loaded. It gives users a visual cue that the content is being loaded into each UI element.
Skeleton Screen when used as the feature in the product make people perceive that app/website is loading fast. Improved perceived performance not only provide good UX but also helps in increasing conversion ratio.
there is a loader component in starting of pages. you can remove it by just delete that section.
import LoaderHoc from "@/utils/LoaderHoc"
import { LoadingLoaderProps } from "./LayoutTypes"
const LoadingLoader: React.FC<LoadingLoaderProps> = ({ show }) => {
return (
<>
{show && (
<div className="loading-text">
<div>
<h1 className="animate">Loading</h1>
</div>
</div>
)}
</>
);
};
export default LoaderHoc(LoadingLoader);
If you use image as background than add class ".bg-img" in image and add below class in parent.
RTL and pages link button are for demo purpose only, following is the steps to remove that buttons:
without this plugins and products, our theme will be incomplete.