Installation #

To get started with the Safal NextJS template, follow these steps to ensure a smooth installation process:

1. Download the Template: Purchase and download the Safal template zip folder from ThemeForest.

2. Extract the Zip Folder: Unzip the downloaded file to a location of your choice on your computer. You should see two folders named safal-nextjs-template and documentation.

   The documentation folder contains the documentation files for the template that you are currently reading.

   The folder structure of safal-nextjs-template should look like:

   ├── app
   │   ├── (site)
   │   │   └── [...path]
   │   ├── pages
   │   │   ├── about-us.json
   │   │   ├── contact-us.json
   │   │   ├── home-2.json
   │   │   ├── home.json
   │   │   ├── inner-page.json
   │   │   ├── privacy-policy.json
   │   │   └── terms-of-service.json
   │   ├── pages.config.json
   │   └── site.config.json
   ├── components
   │   ├── core
   │   │   ├── Block
   │   │   ├── Button
   │   │   ├── ButtonGroup
   │   │   ├── Eyebrow
   │   │   ├── Footer
   │   │   ├── Header
   │   │   ├── Icon
   │   │   ├── Image
   │   │   ├── Link
   │   │   ├── Logo
   │   │   ├── Nav
   │   │   ├── Socials
   │   │   └── Typography
   │   └── sections
   │       ├── CTABanner
   │       ├── ContentBlock
   │       ├── ContentGrid
   │       ├── FAQs
   │       ├── Hero
   │       ├── LogosCarousel
   │       ├── MediaContentSplit
   │       ├── Pricing
   │       ├── ProductShowcase
   │       └── Testimonials
   ├── lib
   │   ├── hooks
   │   └── utils
   ├── public
   │   ├── favicon.ico
   │   └── logo.png
   ├── styles
   └── types
   

3. Install Dependencies: Navigate to the safal-nextjs-template folder in your terminal and run the following command to install the necessary dependencies:

   npm install or yarn install

4. Run the Development Server: After the dependencies are installed, you can start the development server with:

   npm run dev or yarn dev

   This will start the application on http://localhost:3000.

5. Build for Production: To create an optimized production build, run:

   npm run build or yarn build

To know more about the nextjs and its configuration, development server, production build, hosting your site on vercel or other platforms etc. Check out the NextJS Documentation.

Want to learn about the Tailwind and TypeScript? Check out the Tailwind Documentation & TypeScript Documentation.