Next.js .CAR File Upload

Learn how to configure Next.js .car File Upload for use with Filebase.

What is Next.js .car File Upload?

Next.js .car File Upload is a tool developed to provide an easy, locally hosted interface for multiple image files to be uploaded to Filebase as a .CAR file.

Special thanks to @dapponics for developing this tool.

Read below to learn how to use Next.js .car File Upload with Filebase.

Prerequisites:

• Sign up for a free Filebase account.

• Have your Filebase Access and Secret Keys. Learn how to view your access keys here.

• Create a Filebase IPFS Bucket. Learn how to create a bucket here.

1. Start by cloning the Github Repository:

git clone https://github.com/Dapponics/filebase-nextjs-example.git

2. Navigate into the filebase-nextjs-example directory.

cd filebase-nextjs-example

3. Create an .env.local file similar to .env.example.

4. In the env.local file, input the following text:

FILEBASE_ACCESS_KEY_ID=”FILEBASE_ACCESS_KEY_ID”

FILEBASE_SECRET_ACCESS_KEY=”FILEBASE_SECRET_ACCESS_KEY”

FILEBASE_BUCKET_NAME=”FILEBASE_BUCKET_NAME”

5. Run yarn install, then yarn dev to start the Next.js app at localhost:3000.

6. Navigate to localhost:3000 in a web browser.

7. Choose any .png or .jpg files to be uploaded to your Filebase bucket.

These images will be uploaded under the same CID in your Filebase bucket.

If you have any questions, please join our Discord server, or send us an email at [e-mail]