1. Node.js and npm

This Next.js project requires Node.js and npm (Node Package Manager). If you don't have them installed, download and install Node.js from nodejs.org . npm is included with Node.js.

You can verify your installation by running:

node -v
npm -v

2. Project Setup

If you've cloned this project from a Git repository, navigate to the project directory in your terminal. If you're starting from scratch with a Next.js template, you would typically use:

npx create-next-app@latest my-pdf-tools-app --typescript --tailwind --eslint

(The current project is already set up, so this is for general Next.js context).

3. Install Dependencies

Once you have the project files, open your terminal in the project's root directory and run the following command to install all the necessary dependencies defined in `package.json`:

npm install

This command reads the `package.json` file and downloads the required packages into the `node_modules` folder.

4. Run Development Server

After the dependencies are installed, you can start the local development server:

npm run dev

This will typically start the application on http://localhost:3000 (or the port specified in `package.json`, which is `9002` for this project: http://localhost:9002 ).

npm run genkit:watch

Here's a brief overview of the key directories and files in this Next.js project:

• /src/app: Contains all your application's routes, pages, and layouts using the Next.js App Router. Each folder typically represents a URL segment.
  • page.tsx: The main React component for a route.
  • layout.tsx: Defines a UI shell shared across multiple pages.
  • loading.tsx: Optional loading UI for a route segment.
  • error.tsx: Optional error UI for a route segment.
• /src/components: Houses reusable React components used throughout the application.
  • /ui: Contains UI components from ShadCN (e.g., Button, Card, Input).
  • Client components for specific tools (e.g., `smart-crop-client.tsx`).
• /src/ai: Dedicated to AI-related functionality, primarily using Genkit.
  • /flows: Contains Genkit flow definitions (e.g., `adjust-crop-placement.ts`). These orchestrate calls to AI models.
  • genkit.ts: Global Genkit AI instance configuration.
  • dev.ts: Development server setup for Genkit, importing all flows.
• /src/lib: Utility functions and shared library code.
  • utils.ts: General utility functions, like `cn` for classnames.
• /src/hooks: Custom React hooks (e.g., `use-toast.ts`, `use-mobile.ts`).
• /public: Static assets that are served directly, like images or fonts (though `next/image` and `next/font` are preferred for optimization).
• next.config.ts: Configuration file for Next.js.
• tailwind.config.ts: Configuration file for Tailwind CSS.
• src/app/globals.css: Global stylesheets, including Tailwind base styles and CSS variable definitions for ShadCN theming.
• package.json: Lists project dependencies and scripts (like `dev`, `build`).
• components.json: Configuration file for ShadCN UI components.
• apphosting.yaml: Configuration for Firebase App Hosting.

Follow these steps to deploy your PDF Power Tools project to Vercel:

1. Push your project to a Git provider: Ensure your project code is on GitHub, GitLab, or Bitbucket.
2. Sign up or log in to Vercel: If you don't have an account, create one at vercel.com .
3. Import your project:
   • From your Vercel dashboard, click "Add New..." and select "Project".
   • Connect Vercel to your Git provider if you haven't already.
   • Select the repository for your PDF Power Tools app.
4. Configure project settings (usually auto-detected):
   • Vercel typically auto-detects Next.js projects and sets the Framework Preset to "Next.js".
   • Root Directory should be the base of your project.
   • Build Command and Output Directory are usually pre-filled correctly (e.g., `next build`, `.next`).
5. Environment Variables:
   • If your application uses environment variables (e.g., for Genkit API keys from a `.env` file), you must add them to your Vercel project settings.
   • Go to your Project Settings > Environment Variables on Vercel. Add each variable (e.g., `GOOGLE_API_KEY`).
   • Do NOT commit your `.env` file to your public repository.
6. Deploy: Click the "Deploy" button. Vercel will build and deploy your application.
7. Assign a domain: Once deployed, Vercel will provide a URL. You can assign a custom domain in the project settings.

Option 1: Using a Hostinger VPS

1. Set up your VPS: Choose an OS (e.g., Ubuntu), and ensure Node.js and npm (or yarn) are installed.

   sudo apt update
   sudo apt install nodejs npm

2. Clone your project: SSH into your VPS and clone your project repository.

   git clone [your-repository-url]

3. Install dependencies: Navigate into your project directory.

   cd [your-project-directory]
   npm install

4. Set up Environment Variables: Create a `.env.production.local` or `.env.local` file in your project root on the VPS (or use your VPS's environment variable management). Add necessary variables like API keys.

   GOOGLE_API_KEY=your_actual_api_key_here

   Ensure this file is NOT committed to Git if it contains secrets.
5. Build your Next.js app:

   npm run build

6. Run your Next.js app: Use a process manager like PM2 to keep your app running.

   npm install pm2 -g
   pm2 start npm --name "next-app" -- start

7. Configure a reverse proxy (Recommended): Set up Nginx or Apache as a reverse proxy to forward requests from port 80/443 to your Next.js app (which typically runs on port 3000).
8. Configure your domain: Point your domain to your VPS IP address in Hostinger's DNS settings.
9. Set up SSL: Use Let's Encrypt (Certbot) to secure your site with SSL.

Option 2: Using Hostinger Panel with Node.js Support

If your Hostinger plan includes a "Setup Node.js App" feature (often in hPanel or cPanel):

1. Upload your project: Use the File Manager or Git integration to upload your project files.
2. Set up Node.js App:
   • Find the "Setup Node.js App" (or similar) tool in your control panel.
   • Create a new application.
   • Set the Application Root to your project's directory.
   • Set Application Mode to "production".
   • Set Application Startup File: This might be tricky. Next.js relies on `next start`. If the panel requires a specific file like `app.js`, you might need a simple wrapper script. Check Hostinger's documentation. Often, you might specify `node_modules/.bin/next` as the command and `start` as an argument if possible, or just run `npm start` if your `package.json`'s `start` script is `next start`.
3. Install dependencies: Use the panel's "Run NPM Install" button or access via SSH to run `npm install`.
4. Build the application: You'll need to run `npm run build`. This might be via SSH or a command interface in the panel.
5. Environment Variables: Look for a section in the Node.js app setup to add your environment variables (e.g., `GOOGLE_API_KEY`).
6. Start the app: Use the "Start App" button in the panel.
7. Domain and SSL: Ensure your domain is correctly pointed and SSL is configured through Hostinger's tools.