method of ReactJS development was officially deprecated. As such, an alternative way forward was to use the ReactJS framework, NextJS. For today's Easter-themed web tutorial, I will be walking through some basic features of NextJS.
Do note that not a lot of things will be new here; the bulk of it is still doable in a standard ReactJS setup, or even NodeJS.
To begin, I will assume that NextJS has been installed on your machine. We'll create the app with this command. "easter-poem-generator" is the name of the app, and consequently, the folder that it will be created in.
The script will ask some questions. These are the options I have chosen.
folder. We'll make some changes to the layout.
directory, add these images.
 |
public/symbol_cross.jpg
|
 |
public/symbol_eggs.jpg
|
 |
public/symbol_lillies.jpg
|
Time to create the form. We start with "use client" to state that this file is only for front-end JavaScript. Since JavaScript is being used for both front and back ends of the application, it's important to specify because this determines what features of JavaScript you'll get to use in the file.
src/app/page.js"use client"
Then, because we have links in this page, we'll import the
Link component. We will also import styles that have already been compiled. Finally, we will import
useState because we will be using state variables.
src/app/page.js"use client"
import Link from "next/link";
import styles from "./page.module.css";
import { useState } from "react";
Next, we create a main function for this page. We will create the
return statement in advance.
src/app/page.js"use client"
import Link from "next/link";
import styles from "./page.module.css";
import { useState } from "react";
export default function Home() {
return (
);
}
Now, if you know ReactJS at all, this should be familiar ground. This is why we imported
useState earlier, so we can set state variables. The first thing we want is form data. Thus,
formData will be an object containing these properties. As default, only
symbol_bunny is not an empty string.
src/app/page.jsexport default function Home() {
const [formData, setFormData] = useState({
symbol_bunny: "bunny",
symbol_chicks: "",
symbol_cross: "",
symbol_eggs: "",
symbol_lillies: ""
});
return (
);
}
And then we have
generation, which is an object containing the property
poem.
src/app/page.jsexport default function Home() {
const [formData, setFormData] = useState({
symbol_bunny: "bunny",
symbol_chicks: "",
symbol_cross: "",
symbol_eggs: "",
symbol_lillies: ""
});
const [generation, setGeneration] = useState({
poem: ""
});
return (
);
}
Next, we have two functions.
handleChecking() is something standar that happens instantaneously, to ensure that the input is correct.
handleSubmit() is an asynchronous function because we are going to have to call API endpoints and wait for responses in this function.
src/app/page.jsconst [formData, setFormData] = useState({
symbol_bunny: "bunny",
symbol_chicks: "",
symbol_cross: "",
symbol_eggs: "",
symbol_lillies: ""
});
const [generation, setGeneration] = useState({
poem: ""
});
const handleChecking = (e) => {
};
const handleSubmit = async (e) => {
};
return (
);
In the
return statement there will be JSX. In here, we have a div styled using the CSS class
generationContainer, and a form. The form will run
handleSubmit() when data is submitted.
src/app/page.jsreturn (
<div className={styles.generationContainer} >
<form onSubmit={handleSubmit}>
<h1>Generate an Easter Poem!</h1>
</form>
</div>
);
Clear out this file. We will add in the
generationContainer CSS class. It's basically a centered div with a fixed width. Then we'll style the form. It has rounded corners and a solid light
red border.
src/app/page.module.css.generationContainer {
width: 500px;
margin: 0 auto 0 auto;
}
.generationContainer form {
width: 450px;
padding: 10px;
margin: 0 auto 0 auto;
border-radius: 10px;
border: 1px solid rgb(255, 100, 100);
}
Not much to look at right now, but this will change soon.
We then have a line of instructions, and we will display a series of checkboxes based on the
formData object. For this, we use the
map() method on
formData. Since
formData is an object, we need to make it iterable by using the
entries() method of
Object, on it.
entries() will turn
formData into an array of objects containing properties and values.
src/app/page.jsreturn (
<div className={styles.generationContainer} >
<form onSubmit={handleSubmit}>
<h1>Generate an Easter Poem!</h1>
<b>Include at least one of these elements</b>
{
Object.entries(formData).map(([key, value]) => (
))} </form>
</div>
);
In this, we have a
label tag styled using CSS class
label. Because the ReactJS engine will complain if we don't, use
key to populate the value of the
key attribute.
src/app/page.jsreturn (
<div className={styles.generationContainer} >
<form onSubmit={handleSubmit}>
<h1>Generate an Easter Poem!</h1>
<b>Include at least one of these elements</b>
{
Object.entries(formData).map(([key, value]) => (
<label className={styles.label} key={key}>
</label> ))}
</form>
</div>
);
We will then have a checkbox within that
label tag. The
name attribute will be
key.
handleChecking() will be run for the
onchange() attribute. The checked value will depend if
value is an empty string.
src/app/page.jsreturn (
<div className={styles.generationContainer} >
<form onSubmit={handleSubmit}>
<h1>Generate an Easter Poem!</h1>
<b>Include at least one of these elements</b>
{
Object.entries(formData).map(([key, value]) => (
<label className={styles.label} key={key}>
<input type="checkbox" name={key} value={key.replace("symbol_", "")} onChange={handleChecking} checked={ (value !== "") } /> <br />
</label>
))}
</form>
</div>
);
Then add the text label
key, again less the string "symbol_".
src/app/page.jsreturn (
<div className={styles.generationContainer} >
<form onSubmit={handleSubmit}>
<h1>Generate an Easter Poem!</h1>
<b>Include at least one of these elements</b>
{
Object.entries(formData).map(([key, value]) => (
<label className={styles.label} key={key}>
<input type="checkbox" name={key} value={key.replace("symbol_", "")} onChange={handleChecking} checked={ (formData[key] === key.replace("symbol_", "")) } />
{key.replace("symbol_", "")} <br />
</label>
))}
</form>
</div>
);
Back to styles,
label has a width that will take up less than half of its container, and be floated left.
src/app/page.module.css
.generationContainer form {
width: 450px;
padding: 10px;
margin: 0 auto 0 auto;
border-radius: 10px;
border: 1px solid rgb(255, 100, 100);
}
.label {
display: inline-block;
width: 45%;
float: left;
}
This is nothing that a CSS break won't fix.
Add this CSS break after adding a SUBMIT button.
src/app/page.jsreturn (
<div className={styles.generationContainer} >
<form onSubmit={handleSubmit}>
<h1>Generate an Easter Poem!</h1>
<b>Include at least one of these elements</b>
{
Object.entries(formData).map(([key, value]) => (
<label className={styles.label} key={key}>
<input type="checkbox" name={key} value={key.replace("symbol_", "")} onChange={handleChecking} checked={ (formData[key] === key.replace("symbol_", "")) } />
{key.replace("symbol_", "")}
<br />
</label>
))}
<button type="submit" className={styles.button}>Go!</button>
<br style={{ clear:"both" }} /> </form>
</div>
);
Just some styling for the button.
src/app/page.module.css.generationContainer form {
width: 450px;
padding: 10px;
margin: 0 auto 0 auto;
border-radius: 10px;
border: 1px solid rgb(255, 100, 100);
}
.label {
display: inline-block;
width: 45%;
float: left;
}
.button {
display: inline-block;
width: 5em;
height: 2em;
float: right;
}
All falling into place nicely.
OK, we'll now add a
Link component. Each link's route will be symbol followed by the identifier such as "bunny" or "eggs", thus I cleverly just took key and replaced the underscore with a forward slash.
src/app/page.jsreturn (
<div className={styles.generationContainer} >
<form onSubmit={handleSubmit}>
<h1>Generate an Easter Poem!</h1>
<b>Include at least one of these elements</b>
{
Object.entries(formData).map(([key, value]) => (
<label className={styles.label} key={key}>
<input type="checkbox" name={key} value={key.replace("symbol_", "")} onChange={handleChecking} checked={ (formData[key] === key.replace("symbol_", "")) } />
{key.replace("symbol_", "")}
<Link href={ ("/" +key.replace("_", "/")) } target="_blank">►</Link> <br />
</label>
))}
<button type="submit" className={styles.button}>Go!</button>
<br style={{ clear:"both" }} />
</form>
</div>
);
In order for the link to work, the route needs to work. So create the
symbol directory in
app. And in that directory, create the
[symbolName] directory, square brackets and all. This tells NextJS that
symbolName is a parameter value rather than an actual fixed value. And in that directory, create
page.js. We'll want to import
Image because we'll be working with images. As in the previous page we were working on, we want to import the CSS.
src/app/symbol/[symbolName]/page.jsimport Image from "next/image";
import styles from "../../page.module.css";
We'll want to export this function. As always, we add a
return statement inside the function.
src/app/symbol/[symbolName]/page.jsimport Image from "next/image";
import styles from "../../page.module.css";
export default function SymbolPage({ params }) {
return (
);
}
params will contain
symbolName, which will typically be "bunny", "lillies", etc. Thankfully, we've already saved those in the
public directory, so they're accessible with just a slash. They can thus be used as the value of the
src attribute for the
Image component. Here, I have included the width and height of the image. The
Image component will be placed inside a div styled using the
symbolImage CSS class.
src/app/symbol/[symbolName]/page.jsexport default function SymbolPage({ params }) {
return (
<div className={ styles.symbolImage } >
<Image src={ "/symbol_" + params.symbolName + ".jpg" } alt={ params.symbolName } width={ 300 } height={ 300 } />
</div>
);
}
I am using
symbolImage mostly for positioning. I have also set it so that any
img tag inside
symbolImage will have rounded corners.
src/app/page.module.css.symbolImage {
width: 100%;
min-height: auto;
margin: 10px auto 10px auto;
text-align: center;
}
.symbolImage img{
border-radius: 10px;
}
.generationContainer {
width: 500px;
margin: 0 auto 0 auto;
}
You can see the arrows. Now click on maybe the one beside "bunny".
You see a picture, in a new tab, with rounded corners!
We now add an object,
texts. It has properties that mirror the possible values of
symbolName.
src/app/symbol/[symbolName]/page.jsimport Image from "next/image";
import styles from "../../page.module.css";
export default function SymbolPage({ params }) {
const texts = {
"bunny": ,
"chicks": ,
"cross": ,
"eggs": ,
"lillies":
}; return (
<div className={ styles.symbolImage } >
<Image src={ "/symbol_" + params.symbolName + ".jpg" } alt={ params.symbolName } width={ 300 } height={ 300 } />
</div>
);
}
Here, I'm going to add text strings as values for these properties. These were generated using
Copilot.
src/app/symbol/[symbolName]/page.jsimport Image from "next/image";
import styles from "../../page.module.css";
export default function SymbolPage({ params }) {
const texts = {
"bunny": "
The bunny, or Easter rabbit, is a symbol of fertility and new life, which aligns with the themes of rebirth and renewal celebrated during Easter. Originating from ancient pagan traditions, the rabbit was associated with the goddess Ēostre, who represented spring and fertility. As Christianity spread, the symbolism of the rabbit was incorporated into Easter celebrations. The Easter bunny is often depicted delivering eggs, which are also symbols of new life and rebirth, to children, adding a playful and joyful element to the holiday.",
"chicks": "
Chicks are another symbol of new life and rebirth, aligning with the overall themes of Easter. Just as chicks hatch from eggs, they represent the idea of life emerging from the seemingly lifeless, echoing the resurrection of Jesus. They also symbolize innocence and the start of new beginnings, adding to the joyful and hopeful atmosphere of Easter celebrations. The imagery of chicks, along with eggs and bunnies, helps to convey the sense of renewal and the promise of new life that Easter embodies.",
"cross": "
The crucifix is a powerful symbol in Christianity, especially during Easter. It represents the crucifixion of Jesus Christ, an event central to Christian belief. It signifies the ultimate sacrifice Jesus made by dying on the cross to atone for humanity's sins. It also symbolizes the immense suffering Jesus endured during the crucifixion. The crucifix serves as a reminder of the redemption and salvation offered through Jesus' sacrifice. Easter celebrates Jesus' resurrection, signifying victory over death and the promise of eternal life for believers. This powerful imagery serves as a reminder of Jesus' love and the hope that comes with his resurrection, making the crucifix an integral part of Easter celebrations.",
"eggs": "
Eggs are a rich and multifaceted symbol in Easter traditions. They embody the themes of new life, rebirth, and resurrection, which are central to the celebration of Easter. They represent the emergence of new life from within, mirroring the resurrection of Jesus from the tomb. Just as a chick hatches from an egg, the concept of rebirth is symbolized, signifying the idea of starting anew. Historically, eggs have been seen as symbols of fertility and renewal, aligning with the arrival of spring. The egg, appearing lifeless on the outside but containing life within, represents transformation and the miracle of life. Eggs are often decorated and used in Easter egg hunts, making them a playful and engaging way to celebrate the holiday while reflecting on its deeper meanings.",
"lillies": "
Lilies, particularly white lilies, hold significant symbolism in Easter celebrations. They represent purity, virtue, and the resurrection of Jesus Christ. The trumpet shape of the lily flower is said to symbolize the trumpet call of God, heralding the resurrection. Lilies are often used in Easter decorations and church services to convey a sense of hope, renewal, and new beginnings. Their association with new life and purity makes them a fitting symbol for the themes of Easter."
};
return (
<div className={ styles.symbolImage } >
<Image src={ "/symbol_" + params.symbolName + ".jpg" } alt={ params.symbolName } width={ 300 } height={ 300 } />
</div>
);
}
Then we add a paragraph styled using CSS class
symbolText. The HTML in here will be the current property of
texts being pointed to by
symbolName.
src/app/symbol/[symbolName]/page.jsreturn (
<div className={ styles.symbolImage } >
<Image src={ "/symbol_" + params.symbolName + ".jpg" } alt={ params.symbolName } width={ 300 } height={ 300 } />
<p className={styles.symbolText} >{ texts[params.symbolName] }</p> </div>
);
The
symbolText CSS class just imposes some padding.
src/app/page.module.css.symbolImage {
width: 100%;
min-height: auto;
margin: 10px auto 10px auto;
text-align: center;
}
.symbolImage img{
border-radius: 10px;
}
.symbolText {
padding: 10px;
}
.generationContainer {
width: 500px;
margin: 0 auto 0 auto;
}
You see the paragraph appears!
We're done for the time being. So far, we've covered a bit of NextJS routing and built-in components.
Next
Form validation, submitting and API usage.
