Storage in ForgeStack

ForgeStack provides seamless integration with Firebase Storage and ImageKit for handling file uploads and storage in your Next.js applications. This guide will walk you through the setup and usage of these services within the ForgeStack framework.

Firebase Storage Setup

To use Firebase Storage, you need to set up your Firebase project and configure the necessary rules. Follow these steps:

1. Go to the Firebase Console .
2. Create a new project or select an existing one.
3. Navigate to the “Storage” section and click on “Get Started”.
4. Set up the storage rules according to your application’s needs.

ImageKit Setup

ImageKit is a powerful image optimization and transformation service. To integrate ImageKit with your ForgeStack application:

1. Sign up for an account at ImageKit .
2. Create a new project and obtain your API keys.
3. Configure your ImageKit settings in the .env file:

NEXT_PUBLIC_IMAGEKIT_URL_ENDPOINT=your-imagekit-endpoint
NEXT_PUBLIC_IMAGEKIT_PUBLIC_KEY=your-imagekit-public-key
NEXT_PUBLIC_IMAGEKIT_PRIVATE_KEY=your-imagekit-private-key

File Uploads

To handle file uploads in the application, I’ve created a custom hook that utilizes Firebase Storage and ImageKit. To use this hook in your components:

const imagekit = useImageKit();
 
  useEffect(() => {
    const handleFetchPhotos = async () => {
      const result = await imagekit.fetchPhotos();
      if (result.success) {
        console.log("Fetched photos:", result.data);
        setPhotos(result.data);
      } else {
        console.error("Failed to fetch photos:", result.error);
      }
 
    }
    handleFetchPhotos();
  }, []);

import { Image } from "@imagekit/next";
 
  {photos.map((photo) => (
          <div key={photo.fileId} className="mb-4">
            <Image src={`tr:q-100/${photo.filePath}`} alt={photo.name} className="w-full h-auto rounded" width={40} height={40} />
          </div>
        ))}

Conclusion

With ForgeStack, integrating file storage and uploads is a breeze. By leveraging Firebase Storage and ImageKit, you can build powerful applications that handle media files efficiently. For more advanced usage and customization options, refer to the official documentation of Firebase  and ImageKit .