This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

INNGEST GET STARTED GUIDE WITH NEXT.JS

=> https://www.inngest.com/docs/getting-started/nextjs-quick-start

Vercel V0 prompt and preview link for generating the frontend

=> https://v0.dev/chat/resume-builder-homepage-ASL5qOqfVXF

npm i html2canvas-pro

npm i jspdf

Thought for 3 seconds### Dynamic Imports in Next.js

Dynamic imports in Next.js allow you to lazy load components and modules, which helps improve the initial loading performance of your application by reducing the JavaScript bundle size. This is particularly useful for components that aren't immediately needed when a page loads.

Using next/dynamic

Next.js provides a built-in solution for dynamic imports through the next/dynamic utility, which is a composite of React's lazy() and Suspense :

import dynamic from 'next/dynamic'

// Basic usage
const DynamicComponent = dynamic(() => import('../components/MyComponent'))

// With loading component
const DynamicWithLoading = dynamic(() => import('../components/MyComponent'), {
  loading: () => <p>Loading...</p>
})

Common Use Cases

1. Lazy Loading Client Components

'use client'

import { useState } from 'react'
import dynamic from 'next/dynamic'

// Client Components:
const ComponentA = dynamic(() => import('../components/A'))
const ComponentB = dynamic(() => import('../components/B'))
const ComponentC = dynamic(() => import('../components/C'), { ssr: false })

export default function ClientComponentExample() {
  const [showMore, setShowMore] = useState(false)

  return (
    <div>
      {/* Load immediately, but in a separate client bundle */}
      <ComponentA />

      {/* Load on demand, only when/if the condition is met */}
      {showMore && <ComponentB />}
      <button onClick={() => setShowMore(!showMore)}>Toggle</button>

      {/* Load only on the client side */}
      <ComponentC />
    </div>
  )
}

2. Skipping Server-Side Rendering

If a component relies on browser APIs like window, you can disable SSR for that component :

'use client'

import dynamic from 'next/dynamic'

// This component will only be loaded on the client
const ClientOnlyComponent = dynamic(() => import('../components/ClientOnly'), {
  ssr: false
})

Note: The ssr: false option only works for client components. You'll see an error if you try to use it in Server Components .

3. Importing Named Exports

To dynamically import a component that uses named exports :

import dynamic from 'next/dynamic'

const DynamicNamedComponent = dynamic(() =>
  import('../components/hello').then((mod) => mod.Hello)
)

4. Loading External Libraries

You can also dynamically import external libraries when needed :

'use client'

import { useState } from 'react'

const names = ['Tim', 'Joe', 'Bel', 'Lee']

export default function SearchExample() {
  const [results, setResults] = useState()

  return (
    <div>
      <input
        type="text"
        placeholder="Search"
        onChange={async (e) => {
          const { value } = e.currentTarget
          // Dynamically load fuse.js
          const Fuse = (await import('fuse.js')).default
          const fuse = new Fuse(names)

          setResults(fuse.search(value))
        }}
      />
      <pre>Results: {JSON.stringify(results, null, 2)}</pre>
    </div>
  )
}

Best Practices

1. Path must be explicit: The import path must be explicitly written and can't be a template string or variable .
2. Top-level imports: The dynamic() call needs to be at the top level of your module for preloading to work correctly, similar to React.lazy() .
3. Server Components: When a Server Component dynamically imports a Client Component, only the Client Components that are children of the Server Component will be lazy-loaded - not the Server Component itself .
4. Type imports: For TypeScript, you can use the import type syntax to import types without affecting the runtime bundle :

// Import only the type, not the actual module
import type { MyComponentProps } from '../components/MyComponent'

Dynamic imports are a powerful tool for optimizing your Next.js application's performance by loading JavaScript only when it's needed.

PDF GENERATION FUNCTION (IF ONLY ONE PAGE)

import html2canvas from "html2canvas"; import jsPDF from "jspdf";

const generatePDF = async () => { const element = document.getElementById("resume-pdf");

if (!element) { console.error("Element not found!"); return; }

try { // Capture the element as a canvas const canvas = await html2canvas(element, { scale: 2, // High quality useCORS: true, // Ensure cross-origin images load correctly backgroundColor: null, // Transparent background });

const imgData = canvas.toDataURL("image/png");

// Create PDF
const pdf = new jsPDF({
  orientation: "portrait",
  unit: "mm",
  format: "a4",
});

const imgWidth = 210; // A4 width in mm
const imgHeight = (canvas.height * imgWidth) / canvas.width; // Maintain aspect ratio

pdf.addImage(imgData, "PNG", 0, 0, imgWidth, imgHeight);
pdf.save("resume.pdf");

} catch (error) { console.error("PDF generation error:", error); } };

PDF GENERATION FUNCTION (IF MULTIPLE PAGES)

const generatePDF = async () => { setIsGenerating(true); try { const element = document.getElementById("resume-pdf");

const html2canvas = (await import("html2canvas")).default; // ✅ Dynamic Import
const jsPDF = (await import("jspdf")).jsPDF; // ✅ Dynamic Import

const canvas = await html2canvas(element);
const imgData = canvas.toDataURL("image/png");

const pdf = new jsPDF({
  orientation: "portrait",
  unit: "mm",
  format: "a4",
});

const imgWidth = 210; // A4 width in mm
const pageHeight = 297; // A4 height in mm
const imgHeight = (canvas.height * imgWidth) / canvas.width;

let heightLeft = imgHeight;
let position = 0;

pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
heightLeft -= pageHeight;

while (heightLeft > 0) {
  position = heightLeft - imgHeight;
  pdf.addPage();
  pdf.addImage(imgData, "PNG", 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;
}

pdf.save("resume.pdf");

} catch (error) { console.error("PDF generation error:", error); } finally { setIsGenerating(false); } };