Serverless Cloud is an amazing development and hosting platform that lets you easily build powerful cloud-based applications. You can build an API in seconds, and it supports file storage, data, scheduled tasks, eventing, static website hosting, and recently added full-stack support for Next.js and other frameworks.
If you are a React developer, then you may already be familiar with Vercel and Next.js. It has support for server-side rendering, automatic image optimization, and more.
Combining Next.js and Serverless Cloud is a great way to build highly scalable serverless applications that combine the best features of both platforms.
To show you how easy it is to use Serverless Cloud and Next.js together, let's setup and deploy our CloudPics example application. It's a React application built with Next.js that lets you upload photos which are stored in Serverless Storage, resized, and indexed in Serverless Data. The home page is visible to both authenticated and non-authenticated users, and it uses server-side rendering to improve SEO and performance for end users.
The CloudPics example has two main parts to it: a frontend that uses Next.js, and a backend that uses the Serverless Cloud SDK.
Requests are made from user browsers to the frontend, which routes /api requests to the API built with the Serverless Cloud SDK. The API implements a simple authentication system, a file upload API that supports image uploads directly to S3, and an API to retrieve the latest uploaded images. As images are uploaded, the Serverless Cloud application reacts to storage events to resize the images, and indexes them in Serverless Data.
Note that this application uses the Cloud SDK to implement its API. You could also use Next.js API Routes to build your API. Check out our Analytics sample application to see how to access the Cloud SDK from your Next.js API routes.
Setting up
We're going to first get this application running locally, and then deploy it to production on Serverless Cloud.
Open a terminal window and clone the serverless/cloud repository that contains the example applications:
Make sure you have Node.js installed and then install Serverless Cloud and Vercel:
Running the example
To run the example we are going to use two terminal windows, one to run the local development server, and one to run the Interactive Cloud Shell.
In the first terminal, run:
This will start up your Cloud developer sandbox and the Next.js development server on port 3000:
Before you use the app, you should add the "TOKEN_SECRET" parameter to the `cloud-pics` app in the Cloud Dashboard, to get rid of the warning.
You can now visit https://localhost:3000, register a user account and start uploading photos.
Any changes you make to the frontend code are automatically compiled and applied by the Next.js development server.
Open another terminal window and in the same directory run `cloud` to start the Interactive Cloud Shell. This will connect to your developer sandbox and allow you to run cloud commands like "share" and "deploy".
Now when you change your backend code, your Serverless Cloud developer sandbox will be updated automatically.
When you're doing full stack development and have a local development server running, your sandbox instance will only respond to back-end API requests, only the local development server will respond to front-end requests. So if you visit one of the URLs displayed above, you won't see the Cloud Pics UI. To see the UI you need to share or deploy.
Sharing your instance
Sharing your sandbox will build your front-end and create a new instance with a snapshot of your developer sandbox, including both the code and any data and storage. Just type "share" in the Cloud Shell, and after building and deploying you will get a new preview instance.
If you visit the new URL you'll see the fully functional app, and you can share the URL with others to try it out.
When you are done you can delete the preview instance in the dashboard, or from the shell:
Deploying to production
Deploying your Serverless Cloud backend to production couldn't be simpler, in the terminal where you are running cloud enter:
This will create a production instance, including both the front-end and back-end, and print out the URL. It will take a little longer to deploy your production instance because behind the scenes your front-end code is being built and optimized to include the minimum amount of code necessary. Static files, like your front-end javascript and CSS files, are also stored and cached in the CDN.
Your application is now running in production! You can visit the new URL, register, and start uploading photos.
When you deploy your own app to production, you'll probably want to set up a custom domain, so be sure to checkout the docs on how to do that.
Go build!
Serverless Cloud now support Next.js natively, allowing you to build full-stack applications with an amazing local developer experience and advanced features like server-side rendering.
Now it's your turn to build something awesome. Make sure to check out the docs for all the details, join our Slack channel, and follow us for updates. Reach out and let us know what great things you are building with Serverless Cloud!
