Next.js

Quick Tip: Next.js Hello World App – Part 2

In Part 1 of this series, I introduced you to the terminal, Node.js, and we spun up the Hello World Example from Next.js. In Part 2, we’re going use a code editor to create a React component, maybe even style it, then finally view it in a web browser.

Note: There are dozens and dozens of code editors out there. Don’t be afraid to experiment until you find the one that you like best. For this article, we’ll be using the wildly popular and open-source code editor VS Code from Microsoft.

Install VS Code

Visit Code.VisualStudio.com/Download.

This is a screenshot of the VS Code download page.

Click the blue button that matches your Operating System. For this article, I’ll be clicking Windows 7, 8, 10.

Once the file finishes downloading, double-click to run the installer. When prompted, select all the boxes:

Continue to click Next until VS Code has successfully been installed.

Open VS Code and the Hello World Folder

Now that VS Code is installed on your computer, double-click the icon on your desktop to open:

vscode welcome screen

Next, we’re going to find the hello-world folder we created in Part 1 of this series. It should be located in your User directory:

open hello world folder

Using your mouse, click on the hello-world folder, and then click the Select Folder button:

select hello world folder

You can safely close the Welcome dialog in VS Code. The following folders and files should be in the sidebar:

hello world folder structure

If you’ve made it this far, great! If not, be sure to catch up on Part 1 of this series.

Open the Integrated Terminal

One of my favorite features of VS Code is the integrated terminal. This feature allows you to use the terminal without app switching.

In the menu bar, click Terminal and then New Terminal:

open integrated terminal in vs code

You should now see the Terminal at the bottom of your screen:

vs code integrated terminal window

Type the following (or copy and paste) into your Terminal, and press Enter:

npm run dev

After a few seconds, you should see the following text appear:

the terminal after running npm run dev

Finally, open up your favorite web browser. In the address bar, type:

http://localhost:3000

the initial homepage view

Nicely done. You’re now set up! Behind the scenes, Webpack is watching for file changes and will automatically recompile the homepage when they’re detected.

Your First Component

Now that your development environment is up and running, let’s jump in and create your first component.

Create the Component Folder and File

In VS Code, click the New Folder icon in the sidebar:

vs code new folder icon

Name the folder components.

Click the components folder with your mouse, and then click the New File icon:

vs code new file icon

Name the file Button.js.

the new Button file

Create the Button Component

I’m not going to dive into how React or import work. For now, focus on creating a simple component. Feel free to type this out, or copy and paste, into Button.js

export default function Button() {
    return(
        <>
            <button>Click Me</button>
        </>
    )
}

VS Code should look exactly like:

the initial button component

Now save this file by clicking File and then Save.

Import Button Component

Now that you have a component (yay!), you’ll need to import it into the homepage.

In the sidebar, navigate to /pages/index.js and double-click your mouse on index.js to open.

VS Code should look similar to this:

the homepage file

At the top of the index.js file, type (or copy and paste) the following:

import Button from '../components/Button'

import the button component

After the </Link> component on line 10, click insert your mouse cursor, then create a new line by pressing Enter on your keyboard.

Now type:

<Button />

insert button component

Save this file by clicking File and then Save.

View the Button Component

Go back to your web browser. and you should already see:

view the button in a web browser

You now know how to create and import a React component. Great work!

Extra Credit: Style Button Component

That button don’t exactly pop; so let’s take one more step together and style the button using a common approach in React: CSS Modules. Next.js has native support for CSS Modules, so there’s nothing else to set up.

Create CSS Module

In the sidebar of VS Code, click on the components folder again, and click the New File icon.

Name the file Button.module.css.

css module for button file

Type (or copy and paste) the following into Button.modules.css:

.button {
  background: blue;
  color: white;
  margin: 0 16px;
  padding: 8px 16px;
}

basic button styles

Save the file by clicking File and then Save.

Import CSS Module

You’ve already imported a file before, so let’s reinforce that knowledge and do it again.

Double click the Button.js tab in VS Code to switch to it. At the top of the file, type (or copy and paste) the following:

import styles from './Button.module.css'

import that css module file

Nice. The last thing to do is use the styles in the button. Type (or copy and paste) the following inside the first <Button> tag:

className={styles.button}

use the styles in a class

The Button.js file should look exactly like this:

the finished button component

Save the file by clicking File and then Save.

Switch to your web browser, and both Webpack and Next.js should have already compiled your CSS. So, it’s ready to view:

Wrap Up

Congratulations! You’ve taken some very important first steps toward building modern apps with React and Next.js. Now that you’ve got the basics, you should take the official Learn Next.js course. Watch Lee Robinson’s YouTube playlist titled, “Learn Next.js,” and view our other articles about Next.js.

Finally, if you’re looking for an experienced web development agency to handle your next Headless WordPress project, get in touch with us today.

Comments

Have a comment?

Your email address will not be published.

accessibilityadminaggregationanchorarrow-rightattach-iconbackupsblogbookmarksbuddypresscachingcalendarcaret-downcartunifiedcouponcrediblecredit-cardcustommigrationdesigndevecomfriendsgallerygoodgroupsgrowthhostingideasinternationalizationiphoneloyaltymailmaphealthmessagingArtboard 1migrationsmultiple-sourcesmultisitenewsnotificationsperformancephonepluginprofilesresearcharrowscalablescrapingsecuresecureseosharearrowarrowsourcestreamsupportunifiedupdatesvaultwebsitewordpress