Building a Tennis Trivia App with Next.js and Netlify

Building a Tennis Trivia App with Next.js and Netlify

css-tricks.com css-tricks.com2 weeks ago in#Dev Love64

Today we will be able to be finding out how one can construct a tennis minutiae app the usage of Next.js and Netlify. This generation stack has transform my go-to on many initiatives. It lets in for fast building and simple deployment. Without additional ado let’s leap in! What we’re the usage of Next.js Netlify TypeScript Tailwind CSS Why Next.js and Netlify You would possibly suppose that that is a easy app that would possibly no longer require a React framework. The reality is that Next.js provides me a ton of options out of the field that let me to simply get started coding the principle a part of my app. Things like webpack configuration, getServerSideProps, and Netlify’s automated advent of serverless purposes are a few examples. Netlify additionally makes deploying a Next.js git repo tremendous simple. More at the deployment a bit afterward. What we’re construction Basically, we’re going to construct a minutiae sport that randomly presentations you the identify of a tennis participant and it’s important to wager what nation they’re from. It is composed of 5 rounds and assists in keeping a working rating of what number of you get right kind. The knowledge we’d like for this software is a listing of gamers alongside with their nation. Initially, I used to be pondering of querying some reside API, however on 2nd idea, made up our minds to simply use a native JSON document. I took a snapshot from RapidAPI and have incorporated it within the starter repo. The ultimate product appears to be like one thing like this: You can to find the general deployed model on Netlify. Starter repo excursion If you wish to have to apply alongside you’ll be able to clone this repository and then cross to the beginning department: git clone [email protected]:brenelz/tennis-trivia.git cd tennis-trivia git checkout get started In this starter repo, I went forward and wrote some boilerplate to get issues going. I created a Next.js app the usage of the command npx create-next-app tennis-trivia. I then proceeded to manually exchange a couple JavaScript information to .ts and .tsx. Surprisingly, Next.js robotically picked up that I sought after to make use of TypeScript. It was once too simple! I additionally went forward and configured Tailwind CSS the usage of this text as a information. Enough communicate, let’s code! Initial setup The first step is putting in setting variables. For native building, we do that with a .env.native document. You can reproduction the .env.pattern from the starter repo. cp .env.pattern .env.native Notice it these days has one worth, which is the trail of our software. We will use this at the entrance finish of our app, so we should prefix it with NEXT_PUBLIC_. Finally, let’s use the next instructions to put in the dependencies and get started the dev server:  npm set up npm run dev Now we get entry to our software at http://localhost:3000. We will have to see a quite empty web page with simply a headline: Creating the UI markup In pages/index.tsx, let’s upload the next markup to the prevailing Home() serve as: export default serve as Home() { go back ( Tennis Trivia – Next.js Netlify What nation is the next tennis participant from? Roger Federer Switzerland Guess Current rating: 0 ); This bureaucracy the scaffold for our UI. As you’ll be able to see, we’re the usage of plenty of application categories from Tailwind CSS to make issues glance a little prettier.  » Read More

Like to keep reading?

This article first appeared on css-tricks.com. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply