Let’s Build A Web App: Pt 1 - Setting up Next.js
Tags: javascript, nextjs, buildinginpublic, react
Published: 2023-02-12 15:02:03

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](https://nextjs.org/)

• If you don’t have **Node.js** installed, [install it from here](https://nodejs.org/en/). 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

![Next Auto Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wxu8i1877kxyhvz6kgt9.png)


## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ym45e280tm782q0ccb6.png)

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

![Cat Post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p64rqw8c20dhuj3b034p.png)

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

![Cat Links](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tjevodjdsf52ds2034u.png)

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 ](https://www.linkedin.com/in/davidchedrick/)for all the updates and future blog posts