Multipurpose Next.js template

Live Preview

Introduction:-

NextPro is an marketing-related Next.js template is a pre-designed structure or layout coded in Next.js that is specifically tailored for creating web pages related to events such as General Marketing, Social Media Marketing, AI in Marketing, Paid Advertising, Video Marketing, Analytics and Reporting, Industry news & Trends and more available to others feature. These templates provide a foundation for web developers and designers to easily create any types of marketing-related websites with a visually appealing and functional design. Below is an itemized description of what you might typically find in an marketing-related Next.js template.

Features:-

  1. Responsive Design : The template is fully responsive, ensuring your website looks great on all devices and screen sizes.
  2. Modern and Stylish Layout : The template features a contemporary design with a focus on aesthetics and user experience.
  3. Customizable Color Scheme : Easily change the color scheme to match your brand or personal preference.
  4. Flexible Grid System : The template is built on a flexible grid system, allowing you to create unique and dynamic layouts.
  5. Smooth Animations : Add subtle animations and transitions to enhance the user experience and make your website more engaging.
  6. Clean and Well-Structured Code : The template is developed using clean Next.js and tailwind css code, making it easy to customize and maintain.
  7. Integrated Contact Form : A ready-to-use contact form is included, allowing visitors to get in touch with you easily.
  8. Countdown Timer : A countdown timer to build excitement for the event and remind visitors of the date.
  9. Sponsors and Partners : Logos and links to event sponsors or partners.

Framework & Packages :-

  1. Next.js- v14.1.3
  2. Tailwind CSS- v3.3.0
  3. Shadcn
  4. Swiper Slider
  5. React Slick
  6. Leaflet Maps
  7. Leaflet Routing Machine
  8. Framer-motion
  9. React Slot Counter
  10. React Fast Marquee
  11. React Modal Video
  12. React Intersection Observer

Install and Build

First, open your command line or terminal then type on your kyboard
  • 'npm i' to install project
  • 'npm run dev' run the project in developer mode
  • 'npm run build' to build the project
  • 'npx serve@latest out' to run the build project
img
img
img
img

Folder Structure

img

Change Layout

Easily change the header and footer by root layout or page layout.

If you need same header and footer the full site then you add the header and footer in the root layout

img

If you need a different header and footer on a different page then you add the header and footer in the child layout.

img

Customizable Color

If you want to change the color. Go to the global CSS file and change the color variable name

img

Reusable components :

If you work on the reusable component, you go to that page. This page calls the component and passes the prop that the specified element changed.

img
img

Data fetching :

  • Server side fetching when you use a server component and you want to fetch data in this case you first create an async function and call the API in this function. Then call this function of your server component now you need to convert your server component to an async function. The width and height of the image should be given during dynamic data fetching.
    img
    img
    img
  • Client Side fetching When you use a client component and you want to fetch data in this case you use useEffect hooks to call the API in this hook.
    img
  • Static Data fetching I have stored the maximum data in the lib folder under a different file and then called the file in the specific component.
    img

Image:

I have added image custom loading. The custom loading expects a URL where your images are hosted. If your images had localhost, then add localhost

img
img
Creating a well-documented and feature-rich Next.js template for marketing can help business Organized and web developers quickly set up appealing business websites that effectively promote the business and provide essential information to attendees.

If you have any further questions don't hesitate to get in touch with our support team.

Thanks for choose our NextPro Next.js template.

Developed by ThemePerch.