Create a dynamic Next.js application

Next.js is a framework for developing production grade React applications and websites that scale. In this tutorial we’ll be creating a Next.js powered application that fetches cocktail recipes from the CocktailDB API.

Create a Next.js project

We’ll start by running npx create-next-app the easiest way to get started with Next.js. Once complete cd into the folder the project was created in and run npm run dev. This will start a local development server at http://localhost:3000.

Homepage

Open the pages/index.js file and remove all the placeholder code.

With a clean starting point we’ll make an API request to return a list rum cocktails:

const endpoint = "https://www.thecocktaildb.com/api/json/v1/1/filter.php?i=rum";
export async function getServerSideProps() {
  const res = await fetch(endpoint);
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}Code language: JavaScript (javascript)

Next.js will pre-render this page on each request using the data returned by getServerSideProps. We can then pass this data to a Home() function that will loop through each of the cocktails and output to HTML:

export default function Home({ data }) {
  const { drinks = [] } = data;
  return (
    <div className="drinks">     
      {drinks.map((drink) => {
        const { idDrink, strDrink, strDrinkThumb } = drink;
        return (   
          <div key={idDrink}>      
            <img src={strDrinkThumb} width="100" />
            <p>{strDrink}</p>
          </div>  
        );
      })}
    </div>
  );
}Code language: JavaScript (javascript)

Individual cocktail pages

Next we’ll create the cocktail pages with the recipe, we’ll link the homepage with these pages later in the tutorial. Inside the pages folder create a drink folder with a [name] subfolder and a index.js file:

|- pages
  |- drink
    |- [name]
     - index.js

[name] provides a dynamic route so we can pass the cocktail name via the URL e.g: /drink/Rum%20Cooler

In drink/[name]/index.js add the following to search the API for the recipe:

const endpoint = "https://www.thecocktaildb.com/api/json/v1/1/search.php?s=";
export async function getServerSideProps({ query }) {
  const { name } = query;
  const res = await fetch(`${endpoint}${name}`);
  const data = await res.json();
  console.log(data);
  return {
    props: {
      data,
    },
  };
}Code language: JavaScript (javascript)

We’ll then pass the data and output it as HTML with a Cocktail() function:

export default function Cocktail({ data }) {
  const { strDrink, strDrinkThumb, strInstructions } = data.drinks[0];
  return (
    <div className="drink">      
      <h1>{strDrink}</h1>
      <img src={strDrinkThumb} alt={strDrink} />
      <p>{strInstructions}</p>
    </div>
  );
}Code language: JavaScript (javascript)

This will be enough data for the purposes of this tutorial but if you view the log you’ll see the full data that is available for each of the different cocktails.

Linking the homepage to the individual cocktail pages

Now we need to add the hyperlink that links the homepage to the individual cocktail pages. Re-open pages/index.js and import the Next.js Link component by adding the following to the first line:

import Link from "next/link";Code language: JavaScript (javascript)

Then edit the return statement to include the Link component:

export default function Home({ data }) {
  const { drinks = [] } = data;
  return (
    <div className="drinks">      
      {drinks.map((drink) => {
        const { idDrink, strDrink, strDrinkThumb } = drink;
        return (
          <span key={idDrink}>
            <Link href="/drink/[name]" as={`/drink/${strDrink}`}>
              <a>
                <img src={strDrinkThumb} width="100" />
                <p>{strDrink}</p>
              </a>
            </Link>
          </span>
        );
      })}
    </div>
  );
}
Code language: JavaScript (javascript)

Adding styling

With the HTML rendered let’s give our application some basic styling.

As we’re already loading a global.css file we can add the CSS there:

.drinks {
  padding: 5%;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 1rem;
}Code language: CSS (css)

This creates a responsive grid layout of the cocktails on the homepage.

For the individual cocktail pages let’s center align the content and restrict the maximum width:

.drink {
  max-width: 400px;
  margin: auto;
  text-align: center;
}
.drink img {
  max-width: 100%;
  display: block;
}Code language: CSS (css)

Adding <title> tags

Currently the <title> tag doesn’t exist so lets import the Next.js Head component at the top of both index.js files as follows:

import Head from "next/head";Code language: JavaScript (javascript)

Then insert the component as the first element in the the drinks and drink div’s:

...
<div className="drinks">
      <Head>
        <title>Rum Cocktails</title>
      </Head>
      {drinks.map((drink) => {
...Code language: JavaScript (javascript)

You should now have a fully functioning dynamic Next.js application that allows you to select a cocktail and view some basic info it. If you want to take this project further it could be expanded upon by loading data from these additional CocktailDB endpoints.

That’s all for this tutorial, hopefully you have enjoyed building along. Why you here be sure to check out some of our other Next.js tutorials.