Documentation

Pro Image Tools - AdSense Ready Next.js & React Web App

If you have any questions that are beyond the scope of this help file, Please feel free to email via Support Page.

Introduction

Pro Image Tools is an all-in-one online image editing web app designed to make image management effortless and efficient. Built with the power of Next.js and React, this tool offers a suite of powerful image editing functionalities suitable for personal, professional, and social media needs.

With a user-friendly interface and AdSense-ready design, Pro Image Tools enables users to compress, resize, convert, crop, and edit images seamlessly. Whether you are optimizing images for the web, preparing them for social media, or performing advanced tasks like OCR or EXIF reading, this app simplifies the entire process in just a few clicks.

Key Features:

• Compress Image: Reduce image file size while maintaining quality.
• Resize Image: Change the dimensions of images with precision.
• Rotate Image: Adjust the orientation of images to the desired angle.
• Crop Image: Trim images to specific areas or dimensions.
• Flip Image: Flip images horizontally or vertically for creative effects.
• Square Fit: Fit images into square dimensions, ideal for social media posts.
• Convert to JPG: Transform images into JPG format.
• Convert to PNG: Convert images to high-quality PNG files.
• Convert to WEBP: Optimize images by converting them to the WEBP format.
• Convert to PDF: Combine and convert images into PDF documents.
• SVG to PNG: Easily convert scalable vector graphics (SVG) into PNG format.
• OCR (Image to Text): Extract text content from images with Optical Character Recognition.
• EXIF Reader: Analyze and view the metadata (EXIF) of your images.

Why Choose Pro Image Tools?

1. Effortless and Intuitive: Designed for all user levels with an easy-to-use interface.
2. Versatile Functions: A wide range of tools to cover every aspect of image editing.
3. Performance Optimized: Powered by Next.js and React for lightning-fast performance.
4. AdSense Ready: Monetize the web app with seamless Google AdSense integration.
5. Social Media Optimization: Tailored tools like Square Fit and compression to prepare images for social media platforms.
6. SEO Optimized: Built with modern SEO practices to ensure high rankings, increased organic traffic, and better visibility on search engines.

Installation

Follow the steps below to set up and run the web app:

1. Step 1: Unzip the downloaded package and navigate to the folder named /pro-image-tools. This is where all the files of the project are located.
2. Step 2: Open your terminal or command prompt. Navigate to the /pro-image-tools folder using the cd command. Then, type npm i or npm install and press Enter. This will download and install all the necessary dependencies for the project.
3. Step 3: After the installation is complete, start the development server by typing npm run dev in your terminal and pressing Enter. This will launch the Next.js application in development mode, and you can view it in your browser at http://localhost:3000 .

Note Ensure you have Node.js installed on your local machine. You can verify this by running node -v in your terminal. If Node.js is not installed, download it from Download Node.js .

File Structure

The directory structure of the Pro Image Tools Next.js 15 App Router web app is organized as follows:

                  
        ┣ 📂pro-image-tools
          ┣ 📂messages
          ┣ 📂posts
          ┣ 📂public
          ┣ 📂src
          ┃ ┣ 📂app
          ┃ ┃ ┣ 📂blog
          ┃ ┃ ┣ 📜manifest.ts
          ┃ ┃ ┣ 📜not-found.tsx
          ┃ ┃ ┣ 📜robots.txt
          ┃ ┃ ┗ 📜sitemap.ts
          ┃ ┣ 📂assets
          ┃ ┣ 📂i18n
          ┃ ┃ ┣ 📜request.ts
          ┃ ┃ ┗ 📜routing.ts
          ┃ ┣ 📂lib
          ┃ ┣ 📂types
          ┃ ┣ 📂utils
          ┃ ┣ 📜constants.ts
          ┃ ┗ 📜middleware.ts
          ┣ 📜app.config.ts
          ┣ 📜eslint.config.mjs
          ┣ 📜next-env.d.ts
          ┣ 📜next.config.ts
          ┣ 📜package.json
          ┣ 📜postcss.config.mjs
          ┣ 📜README.md
          ┣ 📜svgr.d.ts
          ┣ 📜tailwind.config.ts
          ┗ 📜tsconfig.json
                  
                  

Configuration

Configure the web app as per your needs and requirements:

app.config.ts

Below are the default configurations for the Next.js web app. You will need to customise these settings for your deployment in file app.config.ts.

URLs

Pro Image Tools uses a dynamic routing system with Next.js. The URLs are generated based on the folder structure of the app.

To modify the urls, you will have to modify the folder structure and folder names. (NOT RECOMMENDED)

For example, to change the URL of the blog page, you will have to rename the folder src/app/blog to src/app/my-blog. The URL will then be /my-blog.

The file src/constants.ts contains the default URLs for the app. You can modify these URLs as per your requirements, make sure you also modify the folder name incase if you can any pathname/url.

DO NOT change the folder structure of the app unless you are familiar with Next.js routing and configuration.

For more information on routing in Next.js, refer to the official documentation: Next.js Routing .

Internationalization (i18n)

Pro Image Tools uses Next.js Internationalized Routing and next-intl for multi-language support. The app supports multiple languages, and you can add or modify the translations as per your requirements.

The app checks the browser language and automatically switches to the preferred language. You can also manually change the language using the language switcher in the app.

The translations are stored in the messages folder. Each language has its own JSON file containing the translations for the app. You can add new languages or modify the existing translations in these files.

For example, to add a new language, create a new JSON file in the messages folder with the language code as the filename (e.g., fr.json for French). Add the translations in this file in key-value pairs.

The folder src/i18n contains the routing and request utilities for internationalization. You can modify these files to customize the internationalization settings for the app.

The file app.config.ts contains the default locale and supported locales for the app. You can modify these settings as per your requirements.

For more information on internationalization in Next.js, refer to the official documentation: Next.js Internationalized Routing .

Site Metadata

In Next.js app (App Router), folder structure makes up the url structure. You can modify the metadata of various pages in file page.tsx or layout.tsx of that specific folder which will be the url.

For example, to change the Metadata for Home, you will have to edit the file src/app/[locale]/layout.tsx

There is a generatePageMetadatautility function. You can add your meta data config inside it in key value pairs as per Next.js it will generate meta tags automatically

export async function generateMetadata({ params }: Omit) {
  const { locale } = await params

  return await generatePageMetadata({
    namespace: 'HomePage', // Translation namespace for the homepage
    locale,
    path: '/', // Root path for the homepage
  })
}
            

Adsense

Pro Image Tools is Adsense ready, you can either have auto ads or you can add ad slots :

To enable/import adsense head script, you will just have to add your publisher id in variable ADSENSE_PUBLISHER_ID in file app.config.ts. The Google AdSense publisher ID (eg: ca-pub-1234567890) ADD ONLY NUMBER PART (e:g 1234567890) Script will be only injected in production mode and not in development mode localhost

Ad slots:

Incase, if you would like to add ad slot, you can by following below steps:

The AdSlot component integrates Google AdSense unit into your application. Follow the steps below to use this component and display ads in your app.

In the app.config.ts, add your AdSense Publisher ID : ca-pub-XXXXXXXXXXXXXXX (ADD ONLY NUMBER PART): export const ADSENSE_PUBLISHER_ID = "XXXXXXXXXXXXXXX";

You can add below code wherever you would like to display an ad

<AdSlot 
  dataAdSlot="1234567890" 
  dataAdFormat="auto" 
  dataFullWidthResponsive={true} 
/>
            

Example (Fixed size ad: 728x90):

Adding an ad slot below title(HeroSectionTitle) on HomePage (src/app/[locale]/page.tsx):

HomePage (src/app/[locale]/page.tsx):

<Container>
  <HeroSectionTitle title={t('title')} desc={t('desc')} />
  <AdSlot 
    dataAdSlot="1234567890" 
    style="display:inline-block;width:728px;height:90px" // this style should be same as per google adsense provided ad unit
  />
  <FeatureCardList />
</Container>
<Container bg="bg-violet-50">
  <AboutSection />
</Container>
{ENABLE_BLOG && <BlogSection />}
<TestimonialSection />
<Container>
  <FaqSection
    title={t('FaqSection.title')}
    mainTitle={t('FaqSection.maintitle')}
    description={t('FaqSection.desc')}
    translationKey="HomePage.FaqSection"
    itemsCount={10}
  />
</Container>
            

Example (Responsive ad):

Adding an ad slot below title(HeroSectionTitle) on HomePage (src/app/[locale]/page.tsx):

HomePage (src/app/[locale]/page.tsx):

<Container>
  <HeroSectionTitle title={t('title')} desc={t('desc')} />
  <AdSlot 
    dataAdSlot="1234567890"
    dataFullWidthResponsive={true}
    dataAdFormat="auto"
    style="display:block" // this style should be same as per google adsense provided ad unit
  />
  <FeatureCardList />
</Container>
<Container bg="bg-violet-50">
  <AboutSection />
</Container>
{ENABLE_BLOG && <BlogSection />}
<TestimonialSection />
<Container>
  <FaqSection
    title={t('FaqSection.title')}
    mainTitle={t('FaqSection.maintitle')}
    description={t('FaqSection.desc')}
    translationKey="HomePage.FaqSection"
    itemsCount={10}
  />
</Container>
            

You will basically have to add attributes as per the ad unit script provided by Google AdSense.

You can add the ads.txt content in file public/ads.txt

Sitemap

Pro Image Tools comes with a built-in sitemap generator that automatically generates a sitemap.xml file for your app. The sitemap includes all the pages of your app and helps search engines index your content more efficiently.

The sitemap is generated using the sitemap.ts file located in the src/app directory. You can customize the sitemap generation by modifying this file.

You can access the sitemap at url https://proimagetools.flerosoft.com/sitemap.xml. To view complete sitemap in xml format, in the browser, visit above url and right-click and select "View Page Source" or "View Source" (depending on the browser).

Scripts

You can add Google Analytics, Google Tag Manager and other scripts easily.

Google Tag Manager

Pro Image Tools is Google Tag Manager (GTM) ready. You can add your GTM ID in the app.config.ts file to enable GTM tracking on your app.

To enable GTM tracking, add your GTM ID to the GOOGLE_TAG_MANAGER_ID variable in the app.config.ts file. The GTM ID should be in the format GTM-XXXXXXX.

Once you have added your GTM ID, the GTM script will be automatically injected into your app in production mode. You can verify this by inspecting the source code of your app.

Google Analytics

Pro Image Tools is Google Analytics ready. You can add your Google Analytics ID in the app.config.ts file to enable Google Analytics tracking on your app.

To enable Google Analytics tracking, add your Google Analytics ID to the GOOGLE_ANALYTICS_ID variable in the app.config.ts file. The Google Analytics ID should be in the format UA-XXXXXXX-X.

Other scripts:

For adding other scripts, you can add it in src/app/[locale]/layout.tsx file.

You can add other third-party scripts which is supported by Next.js. For a full list of supported scripts, you can visit Third Party Libraries .

To add any other script, you can follow the steps here: Application Scripts

Blog

Pro Image Tools comes with a built-in blog feature that allows you to create and manage blog posts on your app. The blog feature is enabled by default, but you can disable it by setting the ENABLE_BLOG variable to false in the app.config.ts file.

Here are some key points to keep in mind when using the blog feature:

• Markdown Syntax: The blog supports Markdown syntax for formatting content. This allows you to easily add headers, lists, links, images, and more.
• All posts are in /posts directory in file with extension .md
• There are sample articles for your reference. You can use online markdown editors with preview to add an article

Structure

An article/post is divided into two parts:

1. Post Meta Details
2. Post Body

Post Meta Details:

The meta details of an article/post are defined at the beginning of the file. The meta details are written in YAML format. We use the library gray-matter

              
 ---
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor'
excerpt: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.'
coverImage: '/blog/sample-blog-post-one/cover.jpg'
date: '2020-03-16T05:35:07.322Z'
author:
  name: Joe Haddad
  picture: '/blog/authors/joe.jpeg'
ogImage:
  url: '/blog/sample-blog-post-one/cover.jpg'
---
              
            

Post Body:

The body of an article/post is written in markdown format. You can use markdown syntax to format the content of the article. The body of the article is written after the meta details.

              
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus. Praesent elementum facilisis leo vel fringilla. Congue mauris rhoncus aenean vel. Egestas sed tempus urna et pharetra pharetra massa massa ultricies.

Venenatis cras sed felis eget velit. Consectetur libero id faucibus nisl tincidunt. Gravida in fermentum et sollicitudin ac orci phasellus egestas tellus. Volutpat consequat mauris nunc congue nisi vitae. Id aliquet risus feugiat in ante metus dictum at tempor. Sed blandit libero volutpat sed cras. Sed odio morbi quis commodo odio aenean sed adipiscing. Velit euismod in pellentesque massa placerat. Mi bibendum neque egestas congue quisque egestas diam in arcu. Nisi lacus sed viverra tellus in. Nibh cras pulvinar mattis nunc sed. Luctus accumsan tortor posuere ac ut consequat semper viverra. Fringilla ut morbi tincidunt augue interdum velit euismod [OpenAI](https://openai.com 'OpenAI Homepage').

## Lorem Ipsum

Tristique senectus et netus et malesuada fames ac turpis. Ridiculous mus mauris vitae ultricies leo integer malesuada nunc vel. In mollis nunc sed id semper. Egestas tellus rutrum tellus pellentesque. Phasellus vestibulum lorem sed risus ultricies tristique nulla. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Eros donec ac odio tempor orci dapibus ultrices. Aliquam sem et tortor consequat id porta nibh. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Diam vulputate ut pharetra sit amet. Ut tellus elementum sagittis vitae et leo. Arcu non odio euismod lacinia at quis risus sed vulputate.

## Dolor Sit Amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris.

### Consectetur Adipiscing

Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.

#### Sed Dignissim

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

##### Nulla Quis Sem

Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis.

###### Praesent Libero

Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit.

1. Class aptent taciti sociosqu ad litora torquent per conubia nostra.
2. Curabitur sodales ligula in libero.
3. Sed dignissim lacinia nunc.
4. Curabitur tortor.
5. Pellentesque nibh.

- Aenean quam.
- In scelerisque sem at dolor.
- Maecenas mattis.
- Sed convallis tristique sem.
- Proin ut ligula vel nunc egestas porttitor.

> "Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet."

              

Utilities

This module provides functions to retrieve and manage blog posts from the file system.

Available methods:

• getPostSlugs(): Retrieves the list of all post slugs from the posts directory.
• getPostBySlug(slug: string): Retrieves the post data and content for a given slug.
• getAllPosts(): Retrieves all posts, sorted by date in descending order.

Each post is expected to be in Markdown format and located in the posts directory. The post data is parsed using the gray-matter library.

File: src/lib/api.ts

You can check the usage in file src/app/blog/page.tsx

Deployment

Pro Image Tools is a Next.js web app, and it can be deployed to various platforms:

Vercel

Vercel is the recommended platform for deploying Next.js apps. It provides a seamless deployment experience with features like automatic deployments, preview deployments, and more.

For more information on deploying a Next.js app to Vercel, you can visit the Next.js Vercel Deployment Documentation.

Support

If this documentation doesn't answer your questions, So, Please send us Email via Support Page

We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).

Don't forget to Rate this WebApp

More Products

Checkout Our Other Products Below: View Portfolio

EmailGPT | Effortless Email Generation, Powered By OpenAI

Ad Block Detector Pro | Light-weight Pure JavaScript Plugin

Cookie Notice Pro | Advanced jQuery Plugin

iCaptcha | Frontend & Backend reCaptcha Verification

Changelog

See what's new added, changed, fixed, improved or updated in the latest versions.

For Future Updates Follow Us @Codecanyon / @facebook / @twitter / @Instagram

Version 1.0.0 (28 Jan, 2025)

Initial Release