Docs > nextjs

Next.js Installation and Configuration

Learn how to install and configure Next.js with MyImager.

Create project

Simple Start by creating a new React project using vite:

pnpm create next-app@latest my-next-app 
cd my-next-app 
pnpm install

Install myimager in your project

install myimager package :

pnpm add myimager

Declare MyImager Environment Variables

Rename .env.example to .env.local and pass this two Variables to the myimager functions:

MYIMAGER_CLIENT_KEY=<Your MYIMAGER_CLIENT_KEY>
MYIMAGER_PROJECT_KEY=<Your MYIMAGER_PROJECT_KEY>

Final Steps

After complet this two steps we can use all function provided by myimager:

 import {sendOnMyimager} from "myimager";
 import { useState } from "react";

 export default function FileUpload() {
 // State to store the uploaded file
 const [file, setFile] = useState(null);
 const[url,setUrl]=useState("");
 // Handler to update state when file is selected
 const handleFileChange = (event) => {
 const fileInput = event.target.files[0];
    if (fileInput) {
      setFile(fileInput); // Set the selected file in the state
<<<<<<< HEAD
     const res=await sendOnMyimager(file,MyImager_Client_Key,Project_Key)
     console.log(res);
     setUrl(res.url);
=======
      const result =sendOnMyimager(file,MyImager_Client_Key,Project_Key);

console.log(result)
setUrl(result.url)
>>>>>>> 990f96cdbe370ad750f6ac02d697d7e6423409c5
    }
  };

// Optionally, display the file name or other file properties
 return (
  <div className="container mx-auto my-10">
      <h1 className="text-2xl font-bold mb-4">File Upload</h1>
      <input
        type="file"
        onChange={handleFileChange}
        className="mb-4 p-2 border border-gray-300 rounded"
      />
      {file && (
        <div className="mt-4">
          <p className="text-lg">
            <strong>File Selected:</strong> {file.name}
          </p>
          <p className="text-sm text-gray-500">
            Size: {Math.round(file.size / 1024)} KB
          </p>
        </div>
      )}
    </div>
  );
}