#AD 50 Projects In 50 Days (HTML, CSS & JavaScript) - Sharpen your skills by building 50 mini projects!
#nextjs #react

Create and deploy a dynamic Next.js website

By Michael Burrows | Last modified January 13th 2021 | GitHub Source Code [GitHub]

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 website that fetches data about NBA teams from the SportsDB API.

NBA Team Logos

Create a Next.js project

We’ll start by running npx create-next-app the easiest way to get started with Next.js.

Once finished run npm run dev and a local server running at http://localhost:3000 will be started.

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 of all the teams in the NBA:

const endpoint = "https://www.thesportsdb.com/api/v1/json/1/search_all_teams.php?l=nba"; 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 data to a Home() function that will output the team names and logos:

export default function Home({ data }) { const { teams = [] } = data; return ( <div className="teams"> {teams.map((team) => { const { idTeam, strTeam, strTeamBadge } = team; return ( <div key={idTeam}> <img src={strTeamBadge} width="100" /> <p>{strTeam}</p> </div> ); })} </div> ); }
Code language: JavaScript (javascript)

Team pages

Next we’ll create the individual team pages, we’ll link the homepage with these pages later in the tutorial.

Inside the pages folder create a team folder with a [name] subfolder and a index.js file:

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

[name] provides a dynamic route so we can pass the team name via the URL e.g: /team/Brooklyn%20Nets

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

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

Similar to the homepage we’ll grab some data and output it into the page by creating a Team() function:

export default function Team({ data }) { console.log(data); const { strTeam, strStadium, strStadiumThumb, strFacebook, strInstagram, strTwitter, } = data.teams[0]; return ( <div className="team"> <h1>{strTeam}</h1> <h3>Stadium</h3> <p>{strStadium}</p> <img src={strStadiumThumb} width="400" /> <h3>Social</h3> <ul> <li><a href={strFacebook}>Facebook</a></li> <li><a href={strInstagram}>Instagram</a></li> <li><a href={strTwitter}>Twitter</a></li> </ul> </div> ); }
Code language: JavaScript (javascript)

This will be enough data for this tutorial but if you view the console.log you’ll see the full data available.

Linking homepage to the team pages

Now we need to add the hyperlink that links the homepage to the individual team 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)

Edit the return to include the component linking it the team page using the team name as a query string:

return ( <span key={idTeam}> <Link href="/team/[name]" as={`/team/${strTeam}`}> <a> <img src={strTeamBadge} width="100" /> <p>{strTeam}</p> </a> </Link> </span> );
Code language: JavaScript (javascript)

Adding styling

With the data in place let’s now give our website some basic CSS.

The application is already loading a global.css file so let’s add our CSS there:

.teams { 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 team logos on the homepage.

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

.team { max-width: 400px; margin: auto; } .team img { max-width: 100%; display: block; } .team ul { padding-left: 1rem; }
Code language: CSS (css)

Adding <title> tags

Currently the <title> tag don’t exist so lets import the Next.js Head component at the top of index.js:

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

Then insert the component as the first element in the return <div> with a title tag:

... <div className="teams"> <Head> <title>NBA Teams</title> </Head> {teams.map((team) => { ...
Code language: JavaScript (javascript)

You now have a website that allows you to select a team and get some basic info about them.

It could be further expanded upon by loading data from these additional SportsDB endpoints.

Deploying to Vercel

Because Next.js was created by Vercel they make it simple to deploy Next.js applications.

First create a free account then install the Vercel CLI with the following command:

npm i -g vercel

Now run the vercel command and you’ll be asked to verify your email address.

Once verified run vercel again and follow the prompts to deploy the site to a Vercel sub domain.

Here’s the completed website deployed to Vercel – https://nbateams.vercel.app/.