DEV Community: Bu-jai

Building a Notes App with Next.js 13

Bu-jai — Sun, 09 Apr 2023 00:35:18 +0000

In this blog, we’ll build a notes application using Next.js 13. Most, if not all, of the stuff I’ve learned that is needed to build this app came from Fireship’s video about Next.js 13. I highly recommend watching the video as it provides great information about Next.js 13. With that being said lets go ahead and build the app.

Installing Next.js 13

Before we create a our Next.js 13 application, we first have to make sure that you have these requirements:

Node.js 16.8 or later
Be on MacOS, Windows (including WSL), or Linux

To create your Next.js 13 project, type the following command:

npx create-next-app@latest --experimental-app

If you want to follow along with me, these are the options I selected during the project initialization.

Setting up the Database

For our database, we will be using PocketBase. To know more about PocketBase you can go to their official website, or watch a video about it (Fireship’s PocketBase video).

To setup PocketBase, download its zip archive that can be found on their docs. Unzip the folder and place the .exe file on your project structure. Once done, type this command on the CLI:

./pocketbase serve

Once done, the CLI should have two links that you can click on. Click the link under “Admin UI”. It should open up a new tab on your browser. If prompted, create your admin account.
On the PocketBase Admin UI tab, create a new collection called “notes”. During the creation of the notes collection add two fields, “title” and “notes”, make sure the fields is set to take “Plain text”. After creating the fields, navigate to “API Rules” and click all 5 rules to unlock them.
- Fields

After these steps, your database should be set up.

Next.js 13 Notes App

Under the app directory, delete all the files and folders. Create a new file: page.jsx, this will serve as our home page. Copy the following lines of code:

export default function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Click "Notes" to view the all of your notes.</p>
    </div>
  );
}

After creating the file above, we’ll create layout.jsx, with which we’ll add a global nav bar. Copy the code below and paste it on layout.jsx.

import Link from "next/link";
import "./globals.css";

export const metadata = {
  title: "Next.js",
  description: "Generated by Next.js",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <main>
          <nav>
            <Link href="/">Home</Link>
            <Link href="/notes">Notes</Link>
          </nav>
          {children}
        </main>
      </body>
    </html>
  );
}

Create globals.css, and copy the code:

* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  padding: 0 2rem;
}

a {
  color: inherit;
  text-decoration: none;
  padding: 0;
  margin: 0;
}

nav a {
  font-weight: bold;
  margin: 0 0.5rem;
  text-decoration: underline;
}

Notes directory

Under app, create a folder named notes. This will serve as our notes route. Under the notes folder, create a file called page.jsx and insert the following lines of code:

import Link from "next/link";
import styles from "./Notes.module.css";

async function getNotes() {
  const response = await fetch(
    "http://127.0.0.1:8090/api/collections/notes/records?page=1&perPage=30",
    { cache: "no-store" }
  );
  const data = await response.json();
  return data.items;
}

export default async function NotesPage() {
  const notes = await getNotes();

  return (
    <div>
      <h1>Notes Page</h1>
      <div className={styles.grid}>
        {notes.map((note) => {
          return <Note key={note.id} note={note} />;
        })}
      </div>
    </div>
  );
}

function Note({ note }) {
  const { id, title, content, created } = note;

  return (
    <Link href={`/notes/${id}`}>
      <div className={styles.note}>
        <h2>{title}</h2>
        <p>{content}</p>
        <p>{created}</p>
      </div>
    </Link>
  );
}

We can fetch data from the component itself, since every Next.js 13 component is a Server Component by default.
Create Notes.module.css, and copy the following code:

.grid {
  margin-top: 2rem;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  max-width: 1000px;
}

.note {
  height: auto;
  width: 200px;
  padding: 0.2rem 1rem;
  margin: 0.5rem;
  background: #ffff00;
  box-shadow: 4px 4px 8px 1px #00000075;
  border-radius: 2px;
}

.title {
  padding: 0.1rem;
  font-size: 1rem;
}

.content {
  font-size: 0.9rem;
  font-weight: normal;
}

.created {
  font-size: 0.7rem;
  font-weight: lighter;
}

Dynamic Notes Route

Under our notes directory, create a folder [id] that contains another page.jsx. On the page.jsx copy the following code:

import Link from "next/link";
import styles from "../Notes.module.css";

async function getNote(noteId) {
  const response = await fetch(
    `http://127.0.0.1:8090/api/collections/notes/records/${noteId}`,
    {
      next: { revalidate: 10 },
    }
  );
  const data = await response.json();
  return data;
}

export default async function NotesPage({ params }) {
  const note = await getNote(params.id);

  return (
    <div>
      <h1>Note ID: {note.id}</h1>
      <div className={styles.note}>
        <h2>{note.title}</h2>
        <p>{note.content}</p>
        <p>{note.created}</p>
      </div>
      <Link href="/notes">Go Back</Link>
    </div>
  );
}

Launch App

Once we’ve written the code listed above, we can now launch our Next.js 13 project. Execute the following command in the command line:

npm run dev

Once launched (http://localhost:3000), it directs into the home screen, that says to click “Notes” (at the navbar) to view our notes. Currently there’s no notes, to fix this go to our PocketBase Admin UI and add notes by clicking “New record”. Once notes have been added, refresh the Next project and you should see your notes.

Thanks for taking the time to read my blog. Hopefully you have learned something new. To know more about Next.js 13 I highly recommend reading their docs and/or watching videos about the topic.

Next.js: Understanding the Basics

Bu-jai — Sat, 25 Feb 2023 05:14:46 +0000

In this blog, we'll be discussing what Next.js is and begin to understand the very basics of Next.js. For this particular blog, we'll dive into Next.js 13 which is the newest version of the technology.

What is Next.js

Next.js is a React framework that helps ease the development process of building React web apps. Next.js helps developers by providing tools that help to solve most modern problems of building a web application. Some of these problems include routing, data fetching, performance, and the overall developer experience of building an app. Next.js is developed by Vercel and had its official release date in 2016. The latest version, Next.js 13, was released at the end of 2022. An important note to give is that the features of Next.js 13 can be incrementally adapted into older Next.js projects.

Routing (/app directory)

Before the advent of Next.js 13, developers used the pages directory for routing. However, with the release of Next.js 13, the Next team introduced the app directory. In Next.js 13, the app directory is the latest and preferred way to handle routing in a Next.js application. The new app directory uses file system routing to define the URL paths for an application. It is also built on top of React Server Components, which allows the app to render faster. Next.js 13 also introduces reserved file names:

page.jsx - The file that we will use most frequently. It contains the main UI of the route.
layout.jsx - The file that contains UI that is shared across multiple pages. If we don’t create one, it’ll be auto-generated.
loading.jsx - An optional file used to create a loading UI for a specific part of the app.
error.jsx - Similar to loading.jsx An optional file used to create an error UI for a specific part of the app.
There are more reserved file names, but these four are what I believe will be used most often.

** Note that the .jsx file extension is essentially the same as .js. The .jsx format is simply preferred for React apps.

Let's now take a look at what a URL path would look like using the new app directory. Any directories created in the app directory define the actual URL structure of the app. So a directory structure that looks like this.

Would have the URL structure of www/websitename/settings

Dynamic Routes

With more complex web apps developers can not always know the paths ahead of time. For this, dynamic routes are the answer. A common example of dynamic routes being used is blogs. A blog website always looks the same, except for the main contents of the blog. To define a dynamic route in Next.js, we enclose a directory with brackets. Take a look at the directory structure below.

For a blogging website with thousands, maybe even millions of users. Accessing a particular blog is handled by the id of that blog. Here’s an example

User’s Blog	URL
Kevin’s blog	`www/blogwebsite/blog/7E4DxTnveS`
Bob’s blog	`www/blogwebsite/blog/QJ0ojiIfvS`

The ending URL segment corresponds to the blog id of that user’s particular blog.

Route Groups

Route Groups are another feature of Next.js 13 that allows us to break the app directory mapping the folders into the URL paths. A reason why we might want to do this is to organize our routes without affecting the structure of the URL in our app. To define a Route Group simply enclose a directory with parentheses.

Here’s a picture from the Next.js 13 docs that might help visualize what I mean.

Server/Client Components

All components created under the app directory are automatically inferred as React Server Components. The main reason for this change is because Server Components helps developers more easily render components on the server, and it also reduces the amount of JavaScript shipped to the browser. Which leads to better performance. In Next.js 13, when a page is loaded, the initial HTML is first rendered in the server. The HTML is then progressively enhanced in the browser.

A component can be turned into a Client Component by adding 'use client' at the start of the file. Here’s an example:

'use client';

// Your React code here...

The Next.js 13 docs provide a list on when to make a component a Server or Client Component. Here are some of the examples:

Use Case	Server Component	Client Component
Fetch data	✅	⚠️
Access the back end (directly)	✅	❌
Add interactive elements and event listeners	❌	✅
Use State and Lifecycle Effects	❌	✅

Data Fetching

With Next.js 13, the Next.js team introduced a new way to fetch data. Their main goal was to streamline the API to make sure it aligns with React and the Web platform. Next.js 13 now uses the fetch() native Web API, and makes use of async/await in Server Components. When fetching data, the Next.js team recommends always fetching data in Server Components. The reason being:

Allows the page to have direct access to the back end
Keep the application secure by not allowing the client to see sensitive information
Fetch data and render in the same environment

Here’s what fetching data in a Next.js 13 app would look like.

async function getUserData() {
    // Fetching data in Next 13 using the native fetch() function
    const res = await fetch('https://api.com/...');

    // Return the data as JSON
    return res.json();
}

export default async function User() {
    const userData = await getUserData();

    // Rest of your React code here...
}

** An important note to add is that previous Next.js data fetching methods (getServerSideProps, getStaticProps, and getInitialProps) are not supported in the new app directory.

Hello World!!

Now that we have a rough idea of how a Next.js 13 application functions. Let's create a simple “Hello World” web app.

The first step is to check if you have Node.js 16.8 or higher as Next.js 13 requires it. If you're not sure if you have a compatible version of node, simply use this command: node -v. If your version is out of date or if you don’t have Node installed in your system, download Node.js here.

Now that we have the right version of Node, we can start building our Next.js 13 app.

Run npx create-next-app@latest hellonext13. This creates a Next.js 13 app with the name hellonext13.
Now, delete the pages directory since that’s the old way of doing it. Create a new folder called app. Under app create a file called page.jsx. Inside the page.jsx file, add the following lines of code:

import React from "react";

export default function Page() {
    return (
        <div>
            <h1>Hello World!</h1>
        </div>
    );
}

Since the app directory is experimental as of right now, we’ll have to add something in the next.config.js file. In the file, add the experimental flag to enable the app directory.

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    /* --> add this code <-- */
    experimental: {
        appDir: true,
    },
};

module.exports = nextConfig;

Once we’ve changed and saved next.config.js. We’re ready to run the application. In the command line, type the following command: npm run dev. This will launch the application.
Go to http://localhost:3000/ and you should see your application.

Thanks for taking the time to read my blog. Hopefully, you have learned something about Next.js 13. For more information about Next.js, I highly recommend watching a video, reading other blogs, and reading the Next.js docs.