Next.js 13 – Quick Tutorial

Next.js 13 requires minimum of Node.js 16.14. Moreover, you have to have a bit of understanding how JavaScript in general and React.js in particular work. Instructions given here will work in Linux, macOS and WSL (Windows). Assuming you have met the minimum requirements, enter following command in terminal to create Next.js 13 app:

npx create-next-app@13

Keep pressing Enter to select the default options and you are good to go. Once the installation is finished, go inside the newly created folder my-app:

cd my-app

Execute following command to run development server:

npm run dev

Then, open your browser and enter following URL to check everything is working fine:

localhost:3000

Now, let’s get into Next.js app development; so, open my-app folder in your favorite code editor. Head inside app folder, open app/page.tsx and replace all the code inside it with following:

export default function Home() {
  return (
    <div className="p-4 m-4">
      <p>Hello World!</p>
      <p>This is my Nextjs app...</p>
    </div>
  )
}

Save. The dev server will hot-reload and new contents of the app/page.tsx will render to the browser. Now, open app/layout.tsx and replace title and description by modifying metadata as follows:

export const metadata: Metadata = {
  title: 'My Next App',
  description: 'This is my first Nextjs app',
}

Save, head to the browser and observe the changes you just made (you may view source code inside browser to check the description of your web-app).

Now, let’s add some routes to the app. First, we’ll create app/(main) folder and then a couple of folders within app/(main) folder to represent two routes (/dashboard and /posts). Then we’ll create a common layout.tsx for all folders within app/(main). Finally, we’ll create page.tsx for each of the inner folder. Remember that folder name with parentheses represents a “group of routes” and the name of the folder i.e., (main), doesn’t form part of the URL.

We can create these folders with following command:

mkdir app/'(main)' app/'(main)'/{dashboard,posts}

Now, create a file named page.tsx inside app/(main)/dashboard:

touch app/'(main)'/dashboard/page.tsx

And then insert following code inside app/(main)/dashboard/page.tsx:

export default function Page() {
  return (
    <div className="p-4 m-4">
      Hi, this is Dashboard.
    </div>
  )
}

Similarly, create a file named page.tsx inside app/(main)/posts:

touch app/'(main)'/posts/page.tsx

And then insert following code inside app/(main)/posts/page.tsx:

export default function Page() {
  return (
    <div className="p-4 m-4">
      Hi, these are posts.
    </div>
  )
}

Now create a common layout.tsx inside app/(main):

touch app/'(main)'/layout.tsx

And then insert following code inside app/(main)/layout.tsx:

import Link from 'next/link'

export default function MainLayout({
  children, 
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      <nav className="bg-gray-50">
        <div className="max-w-screen-xl px-4 py-3 mx-auto">
          <div className="flex items-center">
            <ul className="flex flex-row font-medium mt-0 mr-6 space-x-8 text-sm">
              <li>
                <Link href="/" className="text-gray-900 hover:underline">Home</Link>
              </li>
              <li>
                <Link href="/dashboard" className="text-gray-900 hover:underline">Dashboard</Link>
              </li>
              <li>
                <Link href="/posts" className="text-gray-900 hover:underline">Posts</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      {children}
    </section>
  )
}

In the above layout, we’ve utilized Link component of Next.js in order to define navigation links. This layout.tsx will serve as the common layout for all routes within app/(main)/ folder.

Finally, let’s add the data fetching feature in our app; so, replace contents of the above created file app/(main)/posts/page.tsx with following code in order to fetch data from REST API and present the same in tabular form:

async function getData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts?userId=1')

  if (!res.ok) {
    throw new Error('Failed to fetch data')
  }
  return res.json()
}

export default async function Page() {
  const data = await getData()

  return (
    <div className="p-4 m-4">
      <div className="relative overflow-x-auto shadow-md sm:rounded-lg">
        <table className="w-full text-sm text-left text-gray-500">
          <thead className="text-xs text-gray-700 uppercase bg-gray-50">
            <tr>
              <th scope="col" className="px-6 py-3">
                ID
              </th>
              <th scope="col" className="px-6 py-3">
                Title
              </th>
              <th scope="col" className="px-6 py-3">
                Body
              </th>
            </tr>
          </thead>
          <tbody>
            {data &&
              data.map((item, i) => (
                <tr key={i} className="bg-white border-b">
                  <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                    {item.id}
                  </td>
                  <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                    {item.title}
                  </td>
                  <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
                    {item.body}
                  </td>
                </tr>
              ))
            }
          </tbody>
        </table>
      </div>
    </div>
  )
}

Save and then access localhost:3000/posts in your browser.

This tutorial quickly covered the key features of Next.js 13. To get an understanding of these key features, please refer to the previous article. In next article we’ll take up the Dynamic Routing in Next.js 13.