Lab 2.2 - Create a NextJS application
Kubernetes dive-in workshop
NextJS is a React framework that allows you to build server-side rendered applications. In this step, we will create a new NextJS application to display the list of students present in our class.
Objective
Create a NextJS application that displays the list of students present in our class.
- The website should be accessible at
http://localhost:3000. - The website should display the list of students from JSON on the home page as table.
{
"students": [
{
"name": "Mehrshad Lotfi",
"email": "mehrshad@optiop.org"
},
{
"name": "Reza Mohammadi",
"email": "reza@optiop.org"
}
]
}
Instructions
Step 1
We checkout the documentation of NextJS: https://nextjs.org/ Under the section Installation, we see that we can install NextJS using npx:
npx create-next-app@latest
We set a proper name for our application e.g. students, proceed with the default settings, and wait for the installation to finish.
cd students
npm install
npm run dev
Step 2
We edit the file pages/index.js and replace the content with the following code:
const students = {
students: [
{
name: 'Mehrshad Lotfi',
email: 'mehrshad@optiop.org',
},
{
name: 'Reza Mohammadi',
email: 'reza@optiop.org',
},
],
};
export default function Home() {
return (
<div className="relative overflow-x-auto">
<table className="w-full text-left text-sm text-gray-500 dark:text-gray-400 rtl:text-right">
<thead className="bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
Student
</th>
<th scope="col" className="px-6 py-3">
Email
</th>
</tr>
</thead>
<tbody>
{students.students.map((student, index) => (
<tr className="border-b bg-white dark:border-gray-700 dark:bg-gray-800" key={index}>
<th scope="row" className="whitespace-nowrap px-6 py-4 font-medium text-gray-900 dark:text-white">
{student.name}
</th>
<td className="px-6 py-4">{student.email}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}