Get started using Pinata with Next.js
cd
into the repo and install pinata
.env.local
file in the root of the project and put in the following variables:
JWT
from the API key creation in the previous step as well as the Gateway Domain
. The format of the Gateway domain should be mydomain.mypinata.cloud
.
utils
in the root of the project and then make a file called config.ts
inside of it. In that file we’ll export an instance of the Files SDK that we can use throughout the rest of the app.
/app/page.tsx
file take out the boiler plate code and use the following.
/api/files
so now we need to create that route by making /app/api/files/route.ts
in our app.
Once you have created that file you can paste in the following code.
POST
request from the client, then send an API request to Pinata with the upload, then make one more request to get a signed URL we can use to see the content. Once complete it will return the URL to the client.
With our URL we can render the image we uploaded by adding the following code to the page.tsx
file.
cd
into the repo and install pinata
.env.local
file in the root of the project and put in the following variables:
JWT
from the API key creation in the previous step as well as the Gateway Domain
. The format of the Gateway domain should be mydomain.mypinata.cloud
.
utils
in the root of the project and then make a file called config.ts
inside of it. In that file we’ll export an instance of the Files SDK that we can use throughout the rest of the app.
app/api/url/route.ts
.
Once you have created that file you can paste in the following code.
GET
request to /api/url
it will return a temporary signed upload URL that is only valid for 30 seconds, which we can use on the client to make the upload request.
/app/page.tsx
file take out the boiler plate code and use the following.
url()
method in combination with our upload methods which passes in the signed upload url instead of trying to access the admin key. We can take the response and create a URL to access the file.