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.jsis associated with the/route. -
pages/posts/cat-post.jsis associated with the/posts/cat-postroute.
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
Top comments (1)
Nice! I used Vite w/ React option for a full stack and loved it