Next.js is an open-source JavaScript framework created by Vercel that enables you to build superfast and extremely user-friendly static websites and web applications using React with the power of server-side rendering. Server-side rendering means when content on your webpage is rendered on the server and not on your browser using JavaScript.
In contrast to a React app, which typically sends a .js file to the browser, The browser JavaScript engine creates the markup after the .js file is loaded. Examples of traditional SSR languages/frameworks are PHP, Java, ASP.NET, and Node.js.
Server Side Rendering (SSR) has the following benefits:
- Performance
- Search engine visibility
- User experience
- Social sharing
Not all apps need server-side rendering, especially apps with a dashboard and authentication that will not need SEO or sharing via social media.
Although Next.js benefits outweigh the cons, it is still worth discussing:
Next.js does not provide any built-in front pages, so we need to create your front end, which will require changes from time to time that incur additional costs.
Next.js needs to use either Redux or Mobx or something else to manage the application state.
You don't have many plugins that you can plug in and use.Next.js has a wide and robust community and support, it is widely used by the biggest and most popular companies all over the world like Netflix, Uber, Starbucks, and Twitch.
It is easy to deploy on Vercel, but for those who are new and want to deploy on an EC2 instance, it could be a challenge.
Why Amazon EC2 Instance is important service?
Amazon EC2 is one of the fastest-growing cloud computing AWS services, which offers virtual servers to manage any kind of workload. It facilitates the computing infrastructure with the best suitable processors, networking facilities, and storage systems. As a result, it supports adapting to the workloads precisely.
Amazon EC2 enables you to scale up or down to handle changes in requirements or spikes in popularity, reducing your need to forecast traffic.
Hosting NextJs App on EC2
Hosting the Next.js app on AWS EC2 is one of the popular options, and we used it for several internal projects too. In this article, we’ll see how to deploy an existing Next.js app with Nginx on a Ubuntu hosted as an AWS EC2 Instance.
Note: To check whether a domain is pointed correctly to a server's IP check it at https://dnschecker.org
If you haven't registered a domain yet you can purchase from AWS or other providers like GoDaddy, Google ( my fav. one) or Namecheap, etc.
Note: After you have created the instance, you will get a .ppk file that you need to convert into a .pem file
Here are the following steps:
$ brew install putty
$ puttygen key.ppk -O private-openssh -o key.pem
Step 1: Create an EC2 instance and make sure that it has Node.js and npm installed. You can do this by using an Amazon Machine Image (AMI) that comes with these pre-installed, or by installing them manually after launching the instance.
Step 2: Connecting to the existing EC2 Instance:
ssh -i <.pem file path> ubuntu@<server ip>
Step 3: point to the folder where you would like to deploy an application
Step 4: pull the code & authenticate the repository
git pull
Step 5: If the app is already running and want to be re-deploy you need to kill the existing app process before deploying new changes. To check the port we are listening to use the following command (optional)
sudo ss -lptn 'sport = :3000'
Step 6: kill the current process
kill -9 <PID>
Step 7: Execute the following commands to make it up and running. Make sure "&" means you can disconnect the app without killing it.
yarn install
yarn build then yarn start &
That's it! Your Next.js application should now be up and running on your EC2 instance at the attached domain or EC2 instance's public IP address.
Top comments (1)
Nice
Thank you for sharing.