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? … @/*

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

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

Add the following code to the file:

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

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

<Link href="/posts/cat-post">Cat Post!</Link>

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>
        </>
    );
}

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>
        </>
    );
}

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

❤️❤️❤️

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