Deploy a Fullstack Next.js App with Vercel

Deploy a Fullstack Next.js App with Vercel

Spread the love

Web developers are always searching for ways to make websites better with faster loading times, easy scalability and with modern features all with less effort and manageable codes. The Next.js is really a next step towards this goal. Let’s Check why it is an apt option for the modern web development requirements and how the Vercel platform makes deployment an easy experience.

What Next.js actually are

Next.js is a React framework with several stand out features like Server Side Rendering, built in SEO support, easy deployment etc. Next.js is from Vercel, They also provide their own deployment platform for your Next.js app, which makes your releases fast and easy. Creating a React app from scratch has its own challenges like

  • We need to use a bundle like webpack and transform it using a compiler like Babel.
  • Some extra effort is needed for code optimizations like Code splitting etc.
  • Sometimes we need to manually pre-render some pages for performance and SEO. We might also need to configure server-side rendering or client-side rendering.
  • We might need to write some server-side code to connect our React app to a data repository.

Next.js provides solutions for all the above problems, and it also gives many additional features

  • Server-Side Rendering
    By default, Next.js pre-renders every page. This means that Next.js will send completed HTML files to the client side with minimal JavaScript, instead of making HTML using client-side JavaScript. This helps in enhanced performance and SEO.
    • Next.js offers two types of pre-rendering: Static Generation and Server-side Rendering.
    • Static Generation: The HTML is generated at build time and will be used again for each request. You can use this method for pages where dynamic content is not needed. These pages can be cached CDN with no extra configuration.
    • Server-side Rendering: The HTML gets generated for each request. You might need to use this option where pages are updated frequently or where dynamic content is needed.
  • Fast Refresh
    For a fast development experience, next.js can render instant previews without doing anything. The changes we make in the code will get immediately reflected in the browser without even reloading. Fast Refresh is an improved hot reloading experience that gives you instant feedback on edits made to your React components.
  • Image Optimization
    It is essential for a web application to manage images efficiently so as to provide a great user experience.
    Next.js uses many methods to ensure the images are served correctly.
    • Next.js provides a built-in Image Component and Automatic Image Optimization. Automatic Image Optimization allows for resizing, optimizing images according to the requirement.
  • Zero configuration quick start.
    • If you have node already installed on your system a simple command
      npx create-next-app
      Will let you set up a deployment ready app.
  • Automatic built in TypeScript support.
  • Serverless Functions
    Next.js supports serverless functions. You can add your own serverless function files in the ‘pages/API/’ folder.
    API routing helps you for creating your own APIs.
  • Ecosystem Compatibility
    Compatible with javascript, node and react.
  • Built-in CSS and Sass support and support for CSS-in-JS libraries.
  • File-system Routing
    For each file in the page’s directory there is a route associated with it.
  • Code Optimization
    Automatic code splitting is used for faster reloading.

Development with Next.js

Next.js checks the right boxes when it comes to ease of development and deployment. You can create production ready web apps with very little effort. One of the best ways to familiarize with Next.js is to start with Next.js tutorial, You can also refer to the documentation provided by Vercel.

Starting with Next.js

You need to have Node.js version 10.13 or later installed on your system to create Next.js application. You can download and install Node from https://nodejs.org.

After installing Node, you can create your next.js app by using the following command line tool.

$ npx create-next-app

This CLI tool will guide you to an interactive session where you can quickly setup your next.js application initial structure. It will initialize the required files for a next.js application.

You can quickly run the created initial application using the following command after navigating to the project folder.

$ npm run dev

You can view the deployed application at ‘http://localhost:3000’ in your browser. The initial version will be the default welcome page.

The welcome page you are seeing is coming from the contents of the ‘index.js’ file ‘pages’ directory. You can edit the contents of ‘/pages/index.js’ and can preview it immediately in the browser.

Next.js also supports Serverless functions. You can add your serverless function files in ‘./pages/api/’ folder.

Deploying Next.js webapp

When coming to the deployment of a next.js app there are many options, Next.js can be deployed to any hosting provider that supports Node.js. It can be deployed in a couple of different ways:

  • Vercel: The vercel platform is developed by the creators of next.js considering the needs of next.js and specially tailored for the Next.js requirements and specifications. It is the first choice suggested by the Next.js team. It is an all-in-one platform with Global CDN supporting static & Jamstack deployment and Serverless Functions.
  • Static Export: The ‘next export’ command will let you generate static HTML files for your app, which can be run alone without the need of any node.js server.
  • Custom Server: You can deploy your next.js app on a Node server that will dynamically generate pages or serve static ones. But unlike Vercel it will not support some features like serverless functions and Automatic Static Optimization.

 Even though, there are many options for but when coming to the ease of deployment, and the features provided it is only natural that the in-house deployment solution Vercel stands apart from other options. 

Why You Need Automatic Deployment

Deployment is in general the processes required for making an application available for users from a development environment. In the case of web application these processes will be similar for most projects and mainly involves two processes, 

  1. Creating a build of your application compatible for the production environment.
  2. Moving the build to the production environment/server and configuring the environment.

Since, these processes are mostly repetitive tasks, and do not require any human intervention or decision making, they can be automated.

Advantages of automatic deployment:

  • Since the time and effort overhead for deployment is moved from the developers to the machine, people will get more time for more important tasks that need their time and attention.
  • Even though it is more of a repetitive task, humans are prone to making mistakes due to fatigue or inattention etc. So, removing the human factor will reduce such errors, and it will be easier to track any failures if it occurs.
  • It improves the overall efficiency of a team since everyone can trigger a deployment just by git repository merge; more releases can be provided with little effort.
  • We can include other automatic processes into the pipeline like code validation, backup creation etc. And thus we can improve the efficiency further.

Deploying an App to Vercel

You can easily deploy your next.js app to vercel with a few simple steps.

  1. Set up a Git repository

    Vercel supports automatic deployment from your git repository. Create a repository for your project in GitHub. Vercel also supports other repositories like GitLab/BitBucket.
    Vercel will automatically deploy build for commits coming to your “master” branch by default.

  2. Create an account on Vercel

    You can Sign up to Vercel using your git repository account. It supports Sign up using GitHub/GitLab/BitBucket accounts.

  3. Create a new Vercel project

    After signing in, you will be directed towards the Vercel’s Dashboard. Here you can see the history of activities of your deployed applications and options to add new applications.
    Find the “New Project” Button and press it, this will let you import a new git repository for deployment.

  4. Import Git Repository

    In the New project page you can find the  “Import Git Repository” screen, Here you can choose the Git provider you use and set up an integration (Instructions: GitHub / GitLab / BitBucket).
    After selecting the git repository, Vercel will redirect you to GitHub where you will be asked for GitHub access permissions.
    You can also find options to clone sample templates for your new application.

  5. Deploy

    Once you have completed the GitHub, set up, click “Import Project From …” and import your Next.js app. It automatically detects that your application uses Next.js and initiates the build configuration for you. Here you can change the project name if you want, you have options to add Build Commands and output directory, you also have options to set the environment variables used by your application.

  6. Visit your site

    After importing, it’ll deploy your Next.js app and provide you with a generated deployment URL. Click “Visit” to see your deployed app in production.

That’s it. You have now deployed your first Next.js app with Vercel. For further details you can check out the Vercel documentation.

Vercel features

Vercel provides many features and options for your project. In the Vercel dashboard, you can select one of the deployed applications and you will be directed towards the project management dashboard. Here you can check and update all the aspects of your application.

  • In the Overview section you can get the basic information about your application and you can check the production logs of the running application.
  • In the deployments tab you can find the list of deployments for that project and we can go to its details page where we can see the latest logs more information about the deployment
  • Vercel supports the Next.js serverless functions and you can view its logs from the deployment tab detail page.
  • The project Settings section provides you the overall configurations of the project and gives you options for configuring the individual settings for the project.
    • Here you can update the Project name, Build settings and commands etc.
    • You have options to purchase and set custom domains for your application.
    • You can manage your Git configurations here; you can update your deployment branch and deployment hooks.
    • You can manage and configure Environment variables for different environments like Dev, Preview and Production from here.
    • You can configure some additional security settings like password protection for Preview deployment etc.
    • In Advanced settings you can find options for transferring a project or for deleting a project.
  • In the Analytics tab, you can find the statistics regarding different aspects of performance of your project in the real world.

Vercel also provides a CLI to make your incremental updates easier. You can use  Vercel CLI to make deployments through the vercel command. It can also be used to test your Serverless Functions in a local development environment. You can get further details from Vercel CLI documentation.

Resources & methods 

Conclusion

In this post we have just given an introduction to Next.js framework and its integration with the deployment platform Vercel. Next.js + Vercel pair is a suitable option for people looking for web development solutions with modern features and less development and maintenance effort. Vercel provides a quick and easy way to deploy your application instantly with zero configuration and supervision.