Deploying and Testing Next.js on a Virtual Private Server (VPS)
In this blog post, we'll be diving into the process of deploying and testing a Next.js application on a Virtual Private Server (VPS). I've built a Next.js app that tests 13 of the most important features, and I want to see how it performs on a VPS environment.
The app I'll be deploying can be found here: Next.js-host-check. It covers a wide range of Next.js features, including API routes, getServerSideProps, internationalization, middleware, on-demand ISR, next.config.js rewrites, and more. So I'll deploy this application to my VPS, then run the automated Cypress tests to see if all Next.js features are supported.
Why Deploy on a VPS?
There are a few reasons why you might consider deploying your Next.js app on a VPS:
- Full Control: With a VPS, you have complete control over your application and the server it runs on. This allows you to customize and configure everything to your exact needs.
- Location: If you need your application to be hosted in a specific geographic location, a VPS gives you that flexibility.
- Existing Infrastructure: If you already have existing infrastructure set up with a cloud provider that offers VPS options, it might make sense to stick with what you're familiar with.
- Cost Effectiveness: Some people believe that using a VPS can be more cost-effective compared to other hosting options. However, I would argue that the time you save by using platforms like Vercel or Netlify often outweighs any potential cost savings.
If you're asking me where to host your Next.js application, you're going to still hear me say Vercel and Netlify. - Thomas Desmond
The Deployment Process
Let's walk through the steps I took to deploy the Next.js app on a VPS. For this example, I chose to use Hetzner as my VPS provider, but the process should be similar regardless of which provider you choose.
Also, I'm using the Ubuntu 22.04 operating system.
Step 1: SSH into the Server
The first step is to SSH into your VPS server from your local terminal. This allows you to access and interact with the server remotely. You should find your root users password in your VPS console.
1ssh root@your-server-ip
Step 2: Install Node.js
Once you're connected to the server, you need to ensure that Node.js is installed. I used the Node Version Manager (nvm) to install Node.js. You can install nvm by running the following command:
1curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
After installing nvm, you can install the latest LTS version of Node.js with:
1nvm install --lts
Step 3: Clone the Repository
Next, you need to clone your Next.js application repository onto the server. Make sure you have Git installed on your server (usually it is), then clone the repository:
1git clone https://github.com/your-repo-url.git
Step 4: Install Dependencies
Change into the cloned repository directory and install the project dependencies using npm:
1cd your-repo-directory 2npm install
Step 5: Build the Application
To create a production-ready build of your Next.js application, run the following command:
1npm run build
This will generate an optimized build of your app.
Step 6: Start the Application
Finally, you can start the production version of your Next.js app with:
1npm run start
Your application should now be running on the server and accessible via the server's IP address and the specified port (e.g., http://your-server-ip:3000).
Testing the Deployed Application
To ensure that the deployed Next.js app is functioning correctly, I ran Cypress tests against the VPS. Cypress is a powerful testing framework that allows you to write end-to-end tests for your web applications.
1npm run cypress:open
This command opens the Cypress test runner, where you can select and run your test specs.
In my case, the Cypress tests covered various Next.js features such as API routes, getServerSideProps, internationalization, middleware, on-demand ISR, next.config.js rewrites, and more. The tests passed successfully, indicating that the Next.js app was running correctly on the VPS.
However, it's important to note that running on a VPS does come with some limitations and considerations:
- Security: In this example, the application is running in a non-secure environment without SSL setup or additional security measures.
- Performance: The app is running on a single node server without any global distribution or performance optimizations.
- Scalability: Scaling the application on a VPS requires manual configuration and management compared to managed hosting platforms.
Conclusion
Deploying a Next.js application on a Virtual Private Server is a viable option if you require full control over your server environment or have specific hosting requirements. However, it's crucial to weigh the trade-offs and consider the additional responsibilities that come with managing your own server.
For most cases, using managed hosting platforms like Vercel or Netlify can provide a more streamlined and optimized experience for deploying Next.js applications. These platforms offer automatic deployments, built-in performance optimizations, and global distribution out of the box.
Ultimately, the choice of hosting environment depends on your specific needs and priorities. Whether you choose a VPS or a managed platform, ensuring that your Next.js application is properly tested and optimized is key to delivering a great user experience.
Happy deploying! 🚀