Overview

Agenify is a multipurpose SASS, Agency, Startup template based on NextJS. This template includes a lot of pre-designed layouts for home page and inner pages to give you best selections in customization.

This template leverages the power and flexibility of Next.js, Tailwind CSS, and TypeScript to provide a robust and highly customizable foundation for your web projects.

This guide will help you get started with Agenify. All the information regarding file structure, build tools, components, credits, license and FAQ can be found here.

If you have any questions that are beyond the scope of this help documentation, please feel free to contact us with the links below and please don't forget to provide your website URL.

Please remember...
  • Requests sent during weekends or on holidays will be replied on business days.
  • We only provide support for the issues related to the features that are included in the template. Debugging or providing guides on how to make custom modifications are not part of our support. Thank you for understanding.
  • All images are just used for Preview Purpose Only. They are not part of the template and NOT included in the final purchase files.

What you will get

  • NextJS Template source code
  • Documentation

Project structure

  • src : This folder contains all the projects code.
    • src/app : App Router. Here we define all the file base routing.
    • **components : ** Contains all components inside this folder. If you want to need any component modification find from here.
    • **sections : ** Contains all pages sections or blocks inside here
    • src/images : Contain all the images
    • src/lib : Contain all the utility of the projects.
      • src/lib/data : Contains all project dummy data inside this folder.
      • src/lib/plate : Contains all the plate editor configurations file.
      • src/lib/utils.ts : Contains all the utility functions.
  • public : The files placed in the "public" folder are served as static assets by Next.js. These files are accessible directly by their URLs relative to the root of the website.
  • next.config.js : Configuration file for Next.js
  • package.json : Project dependencies and scripts
  • .eslintrc.json : Configuration file for ESLint
  • .gitignore : Git files and folders to ignore
  • next-env.d.ts : TypeScript declaration file for Next.js
  • tsconfig.json : Configuration file for TypeScript
  • tsconfig.json : Configuration file for TypeScript
  • tailwind.config.ts : Configuration file for Tailwind Css
  • postcss.config.js : Configuration file for Postcss
  • component.json : Configuration file for Shadcn UI

Installation

Prerequisites:
  • Ensure you have Node.js and npm installed on your system. You can download and install them from nodejs.org.
  • Verify the installation by running the following commands in your terminal or command prompt:
node -v
npm -v

Now you have to install typescript in your machine. Here we use typescript for making our code more scalable and organized. For installing typescript on your project, you have to run the following command.

npm install -g typescript
  1. Unzip the template package and in the root project folder Agenify, go to your command line and run npm install. This will install the npm packages listed in the package.json file.
  2. Run npm run dev command.
  3. You should now have the project files set up and all the npm packages installed.

Deployment

If you haven’t already done so, push your Next.js app to a Git provider of your choice: GitHub, GitLab, or BitBucket. Your repository can be private or public.

Then, follow these steps:

  • Sign up to Vercel (no credit card is required).
  • After signing up, you’ll arrive on the “Import Project” page. Under “From Git Repository”, choose the Git provider you use and set up an integration. (Instructions: GitHub / GitLab / BitBucket).
  • Once that’s set up, click “Import Project From …” and import your Next.js app. It auto-detects that your app is using Next.js and sets up the build configuration for you. No need to change anything — everything should wor
  • After importing, it’ll deploy your Next.js app and provide you with a deployment URL
  • To get more help on the deployment checkout