Exploring the Jamstack: Building a Fullstack App with Next.js, Strapi and Vercel

Are you looking to build a fast, scalable, and reliable web application with the latest web development architecture? The Jamstack architecture has gained popularity in recent years for its ease of deployment and high-performance capabilities. In this tutorial, we’ll explore how to build a full-stack web application using popular tools like Next.js, Strapi and Vercel.

What is the Jamstack?

The Jamstack architecture is a development approach that emphasizes client-side rendering, pre-built markup, and reusable APIs to create fast and scalable web applications. It stands for JavaScript, APIs, and Markup. By using this approach, we can build web applications with fast-loading times, high security, and excellent scalability. Static site generators like Gatsby, Jekyll and Hugo are some of the popular tools used for implementing the Jamstack architecture.

Why use the Jamstack architecture?

The Jamstack architecture has several advantages over traditional web development approaches. Some of them are:

Improved Performance: Since markup is pre-built and API requests are made during build time, server response times are reduced, resulting in faster load times.
Better Security: By not relying on dynamic server-side scripts, the attack surface is limited, reducing the risk of hacking and other security breaches.
Easier Scalability: The pre-built markup and reusable APIs allow for easy scalability, making it perfect for large web applications.
Lower Cost of Development: With shorter development cycles, less maintenance, and lower operating costs, the Jamstack architecture can reduce the overall cost of development significantly.

What are Next.js and Strapi?

Before we dive into building our Jamstack project, let’s take a moment to understand the tools we’ll be using.

Next.js

Next.js is a React framework for building server-side rendered (SSR) or statically generated web applications with a focus on developer experience. It offers features like code splitting, server rendering, dynamic imports, and more out of the box, making it a popular choice for building high-performance web applications. It also has excellent support for building progressive web apps (PWA) and is fully customizable.

Strapi

Strapi is an open-source headless Content Management System (CMS) that offers a robust set of features to create and manage APIs. Strapi makes it easy to build, manage, and deploy your APIs in minutes with a fully customizable API schema. It comes with a handy admin dashboard to manage the content and users, and it supports multiple databases like MongoDB, MySQL, and PostgreSQL, making it a flexible choice for different types of web applications.

Setting up the project

To get started, let's create a new Next.js project and install Strapi in it. Open your terminal and run the following commands:

npx create-next-app my-jamstack-app

After the project is created, navigate to the project directory and install Strapi:

cd my-jamstack-app
npm install strapi --save

Once the installation is complete, we can proceed with building our application.

Building the backend with Strapi

Now that we have Strapi installed in our project, we’ll use it to create our backend API. Strapi offers a CLI tool to quickly create APIs with a predefined set of fields. To create our API, run the following command in the project directory:

npx create-strapi-app my-strapi-app --quickstart

This will install Strapi along with a predefined set of fields for our new API. Once the installation is complete, start the Strapi server by running:

cd my-strapi-app
npm run develop

This will start the Strapi server on http://localhost:1337/. We can now create our products API by navigating to http://localhost:1337/admin and following these steps:

Click on “Content Types Builder“
Click on "Create New Collection Type" and enter "Product" as the name
Add the fields you want for your products (e.g., name, price, description, image, etc.)
Save the collection type

Our Strapi backend is now ready. We can test the API by accessing http://localhost:1337/products in our browser or using a tool like Postman. If everything is working correctly, we should see a list of products returned in JSON format.

Building the frontend with Next.js

With our backend API ready, we can now proceed to build the frontend of our web application using Next.js. Next.js makes it easy to create server-side rendered or statically generated web applications with React. It also has built-in support for GraphQL, making it an excellent choice for consuming APIs.

First, let’s install the dependencies we’ll need for our Next.js project:

cd ..
npm install graphql-request swr

The graphql-request package is used to send GraphQL queries to our Strapi API, while swr helps us to handle data fetching and caching.

Next, let’s create a new file in the pages directory called index.js. This file will be our homepage and will display a list of products from the Strapi API. Here’s what our index.js file should look like:

import useSWR from 'swr';
import { request } from 'graphql-request';

const PRODUCTS_QUERY = `{
  products {
    id
    name
    price
    description
    image {
      url
    }
  }
}`;

function Home() {
  const { data, error } = useSWR(PRODUCTS_QUERY, (query) => request('http://localhost:1337/graphql', query));

  if (error) return <div>Error loading products!</div>;
  if (!data) return <div>Loading products...</div>;

  return (
    <div>
      <h1>Products</h1>
      <ul>
        {data.products.map((product) => (
          <li key={product.id}>
            <img src={product.image.url} alt={product.name} />
            <h2>{product.name}</h2>
            <p>{product.description}</p>
            <p>${product.price}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default Home;

In this file, we use the useSWR hook to fetch data from our Strapi API and populate our page with a list of products. The graphql-request package is used to send the GraphQL query to http://localhost:1337/graphql.

Now that we have our homepage ready, we can start our Next.js server by running:

npm run dev

This will start the Next.js server on http://localhost:3000/. Navigate to this URL in your browser to see your homepage with the list of products.

Deploying the project to Vercel

Now that our web application is complete, we can deploy it to the cloud using Vercel. Vercel is a cloud platform for serverless deployments and offers an excellent integration experience with Next.js. It also makes it easy to deploy and manage your web application without worrying about infrastructure or server management.

To deploy our application to Vercel, follow these steps:

Create an account on Vercel's website
Go to your project directory and run:
npm install -g vercel
Now run:
vercel login
After you’re logged in, navigate to your project directory and run:
vercel
Follow the prompts and enter the required details like your project name, environment variables, and domain name.

After a few moments, your web application should be deployed and accessible via the domain you specified. Vercel will also create a new deployment for every push to your project’s repository, allowing for easy testing and continuous integration.

Conclusion

Congratulations! You have just built a full-stack web application using the Jamstack architecture with Next.js, Strapi and Vercel. By utilizing the Jamstack architecture, we have created a fast and scalable web application with excellent performance and security.

We have also delved into popular tools like Next.js and Strapi, which have made it easy to build complex web applications in less time. With excellent support for deployment and hosting, we can quickly ship our product and focus on what matters the most – building excellent web applications.