Introduction
If you’re eager to create some impressive real-world apps using Next.js, you’re in for a treat. Whether you’re interested in creating a recipe finder app, setting up your e-commerce store, or creating a portfolio blog to showcase your talent, Next.js is a go-to solution that offers the tools and flexibility. Its versatile nature can bring life to your fresh ideas in your projects and is ideal for beginners. This article walks you through beginner-friendly projects to grasp the fundamentals and enhance your skills. Let’s jump straight into it!
Create a Quiz Using Next.js
- First, you need to set up your account on the Butter CMS from the following link and create your account.
- Once done, navigate to the left side menu and click on the “collection” option. This will create a field for the quiz including questions, available options, correct options, and correct answers containing explanations.
- Go to the collection page and click the “New Item” button. Then create a collection as “my quiz app” with the names of the fields mentioned in the second step.
- After that, you will be directed to the new page to fill in all questions, correct answers, options, and explanations.
- When you’re done with it, click “Publish” button and then add one more additional field.
- Next, you need to install the dependencies so open your command line interface and add the following code. It will create a new Next.js app as “quizapp” npx create-next-app quizapp
- You will need to perform an API request so write the following command:
npm install axios.
- To style your app, add the following command, this will install Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init –p - Once installed, open your app directory from your preferred code editor and then add the code to your tailwind.config.js file:
@type {import('tailwindcss').Config}module.exports = {
content: [
“./pages/**/*.{js,ts,jsx,tsx}”,
“./components/**/*.{js,ts,jsx,tsx}”,
],
theme: {
extend: {},
},
plugins: [],
By following these step you will have installed all the required dependencies and necessary tools to create a quiz app in Next.js. Your quiz app will now consist of a landing page with the option to begin the quiz and a page containing questions for users. The next section walks you through the code to build the front end for your app.
Code to Create the Front-end of the Quiz Application
Open the index.js file and add the following code:
import React from "react"
import Quizselection from "../components/Quizselection"
export default function Home() {
return (
<div>
<Quizselection/>
</div>
)
The above code defines a simple React component as home which imports another component “Quizselection” and renders it with a div element as a part of the user interface.
Read more- What is Next.js? And What it is Used for?
Code to Create a Quiz Selection Page
- Create a folder as a component in your project directory first.
- Inside the component folder create a new file “Quizselection.jsx” file and the add following code:
import { React } from "react";
import Link from "next/link";
const Quizselection = () => {
return (
<div className=" pt-6">
<h1 className=" text-blue-700 text-center text-3xl font-medium my-6 ">
Welcome to my Quiz App
</h1>
<p className=" text-center mt-12 mb-8 ">
Looking to test your general knowledge..? Then you are at the right
place. Try out this fun quiz!
</p>
<div className=" flex justify-center items-center">
<div className=" w-[500px] px-8 py-4 shadow-2xl bg-blue-400 text-white flex justify-center items-center flex-col gap-6 ">
<h1 className=" font-extrabold text-xl ">A Fun Quiz</h1>
<p>
A quiz covering different areas of general knowledge. Test your
knowledge and see how much you know as you go along. Answer
questions on history, geography, science, movies, and more.
</p>
<div className="w-full flex justify-end pr-3">
<button className=" bg-white px-5 py-2 rounded-sm text-black hover:cursor-pointer ">
<Link href="/test" >Begin Quiz</Link>
</button>
</div>
</div>
</div>
</div>
);
};
export default Quizselection;
This code uses HTML-like and JSX styling classes from Tailwind CSS and link components to enable smooth navigation within the application. And displays the selection page with the button to begin the quiz.
Code to Display Quiz Question
- Create a new folder test to organize all the files related to the test page and display them to the user.
- Now add the following code and then run it using this command “npm run dev”
import { React, useState, useEffect } from "react";
import Link from "next/link";
const Index = () => {
const [isQuestionAnswered, setIsQuestionAnswered] = useState(false);
return (
<div className="h-screen w-full flex justify-center items-center ">
<div className="w-4/5 h-3/4 shadow-2xl flex flex-col justify-center items-center font-medium gap-16 ">
<h1 className="text-2xl">What is the capital of England?</h1>
<div className=" grid grid-cols-2 gap-8 gap-x-12 ">
{/* options */}
<div className=" w-[400px] rounded-md flex justify-center items-center py-4 text-white bg-blue-400 hover:cursor-pointer hover:bg-blue-600">
Spain
</div>
<div className=" w-[400px] rounded-md flex justify-center items-center py-4 text-white bg-blue-400 hover:cursor-pointer hover:bg-blue-600">
Spain
</div>
<div className=" w-[400px] rounded-md flex justify-center items-center py-4 text-white bg-blue-400 hover:cursor-pointer hover:bg-blue-600">
Spain
</div>
<div className=" w-[400px] rounded-md flex justify-center items-center py-4 text-white bg-blue-400 hover:cursor-pointer hover:bg-blue-600">
Spain
</div>
</div>
{isQuestionAnswered? (
<div className=" w-full px-2 ">
<p className=" max-h-[100px] overflow-y-scroll ">
{/* correct answer explanation here */}
</p>
</div>
):null}
</div>
</div>
);
};
export default Index;
This code displays the single quiz question with multiple options with the use of “useState”. It uses conditional rendering based on the value that users use it displays the answer section. The component structure is designed to be reused for various quiz questions within the applications.
Steps to Connect App to ButterCMS
- First, you need to locate the Read API token to authenticate and fetch the content from ButterCMS.
- After that, create a file name “.env” to store the environment variable as REACT_APP_READ_TOKEN. Make the same changes within the test folder of the index.js file.
- Now add the following code to fetch requests to your quiz app.
import axios from "axios";
const Index = () => {
const [isQuestionAnswered, setIsQuestionAnswered] = useState(false);
const [questionLength, setQuestionLength] = useState(0);
const [questionNumber, setQuestionNumber] = useState(0);
const [totalScore, setTotalScore] = useState(0);
const [quizQuestions, setQuizQuestions] = useState([]);
const read_token = process.env.REACT_APP_READ_TOKEN;
useEffect(() => {
const fetchData = async () => {
const result = await axios(
`https://api.buttercms.com/v2/content/my_quiz_app?auth_token=${read_token}`
);
setQuizQuestions(result.data.data.my_quiz_app);
setQuestionLength(result.data.data.my_quiz_app.length);
};
fetchData()
}, []);
In this code, we added, states for a score, a number for the current question, and a length. Then this code fetch request from an external API, sets up the necessary states to manage quiz functionality, and handles the data for further processing.
Now, add the following code to read data from ButterCMS.
<h1 className="text-2xl">{quizQuestions[questionNumber]?.quiz_question}?</h1>
<div className=" grid grid-cols-2 gap-8 gap-x-12 ">
{/* options */}
<div className=" w-[400px] rounded-md flex justify-center items-center py-4 text-white bg-blue-400 hover:cursor-pointer hover:bg-blue-600">
{quizQuestions[questionNumber]?.option_one}
</div>
<div className=" w-[400px] rounded-md flex justify-center items-center py-4 text-white bg-blue-400 hover:cursor-pointer hover:bg-blue-600">
{quizQuestions[questionNumber]?.option_two}
</div>
<div className=" w-[400px] rounded-md flex justify-center items-center py-4 text-white bg-blue-400 hover:cursor-pointer hover:bg-blue-600">
{quizQuestions[questionNumber]?.option_three}
</div>
<div className=" w-[400px] rounded-md flex justify-center items-center py-4 text-white bg-blue-400 hover:cursor-pointer hover:bg-blue-600">
{quizQuestions[questionNumber]?.option_four}
</div>
</div>
{isQuestionAnswered ? (
<div className=" w-full px-2 ">
<p className=" max-h-[100px] overflow-y-scroll ">
{/* correct answer explanation here */}
{quizQuestions[questionNumber]?.explanation}
<Pranisha Rai
Next.js is ideal for beginners to create development projects. Next.js learning is simple and easy as compared to other react frameworks.
PublishedOctober 27, 2023
CategoryNext.js developers
Don’t miss the next one.
We publish essays on engineering, hiring, and building teams. Subscribe and we’ll send them when they land.
Unsubscribe anytime · one letter, never more