DEV Community

David Chedrick
David Chedrick

Posted on

Let’s Build A Web App: Pt 1 - Setting up Next.js

#javascript #nextjs #buildinginpublic #react

Let's build a JavaScript project, with the React library, using the Next.js Framework!

Most of the projects I work on are set up with create-react-app, but this time I want to go bigger and use a framework

Starting this project it is assumed that you are familiar with JavaScript, React, VS code, git, and GitHub.

  • You can always check out the official Next.js page to learn more:

Next.js by Vercel - The React Framework

• If you don’t have Node.js installed, install it from here. You’ll need Node.js version 10.13 or later.

Fantastic! Let’s Start!

Create a Next.js app

To create a Next.js app, open your terminal, cd into the directory you’d like to create the app in, and run the following command:
npx create-next-app bodhi-test

!!! To create your own project replace "bodhi-test" with the desired name of your project or just follow along with what I do.

I am going with bodhi test because I am going to build out a quiz web app.

My settings from the terminal startup:

✔ Would you like to use TypeScript with this project? … **No** / Yes ✔ Would you like to use ESLint with this project? … No / **Yes** ✔ Would you like to use `src/` directory with this project? … **No** / Yes ✔ Would you like to use experimental `app/` directory with this project? … **No** / Yes ✔ What import alias would you like configured? … @/*
Enter fullscreen mode Exit fullscreen mode

Once the project is created, navigate to the project directory:
cd bodhi-test

I am using VS code for this project.
Open the project:
code .

Open the terminal and run the development server:
npm run dev
Now you can access your Next.js application at http://localhost:3000.

At http://localhost:3000 should see the auto-generated Next.js page

Next Auto Page

Pages in Next.js

In Next.js, a page is a React Component exported from a file in the pages directory.

Pages are associated with a route based on their file name. For example, in development:

  • pages/index.js is associated with the / route.
  • pages/posts/cat-post.js is associated with the /posts/cat-post route.

We already have the pages/index.js file, so let’s create pages/posts/cat-post.js to see how it works.

Create a New Page

Create the posts folder under pages.

Create a file called cat-post.js inside the posts directory

folders

Add the following code to the file:

export default function CatPost() { return <h1>Cat Post</h1>; }
Enter fullscreen mode Exit fullscreen mode

Back to index.js
Change the p tag to an h1
Add and import the Link

<Link href="/posts/cat-post">Cat Post!</Link>
Enter fullscreen mode Exit fullscreen mode

index.js should look like this:

import Head from "next/head"; import { Inter } from "@next/font/google"; import styles from "@/styles/Home.module.css"; import Link from "next/link"; const inter = Inter({ subsets: ["latin"] }); export default function Home() { return ( <> <Head> <title>Create Next App</title> <meta name="description" content="Generated by create next app" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.ico" /> </Head> <main className={styles.main}> <div className={styles.description}> <h1 className={inter.className}>Cat Home Page!</h1> <Link href="/posts/cat-post">Cat Post!</Link> </div> </main> </> ); }
Enter fullscreen mode Exit fullscreen mode

Cat Post

Back to cat-post.js
Let's add a link to go back home

import Link from "next/link"; export default function CatPost() { return ( <> <h1>Cat Post</h1> <h2> <Link href="/">Back Home</Link> </h2> </> ); }
Enter fullscreen mode Exit fullscreen mode

Cat Links

Click back and forth to make sure the Links are working.

Time to push it up to GitHub.

git add . git commit -m "added first post” git push
Enter fullscreen mode Exit fullscreen mode

❤️❤️❤️

Try and and more Pages and Links. Play with it and explore.

This is part 1 of a series where we will be building out a full stack web application. We will go step by step in the process. Sometimes we will explore different technologies, and sometimes we will dive deeper into a subject. It is all about learning by doing.

Follow me on LinkedIn for all the updates and future blog posts

Top comments (1)

Collapse
 
beingmerry profile image
Ben Merryman •

Nice! I used Vite w/ React option for a full stack and loved it