Skip to content

Hello Next!

Video Summary

In this video, we walk through the fundamentals of a minimal Next.js 13 project.

This is a very visual video, and there's no way for me to do it justice in a summary. Please watch this one!

Here's a quick summary of what we cover:

  • The minimal files needed for a modern Next project.
  • Running a dev server with npm run dev
  • The /app directory, as our way of creating routes
  • page.js lets us "publish" a React component so that it's visible on the web
  • layout.js provides a shared structure, to be used by one or more pages. Essentially, every visible page is a combination of a layout + a page component.
    • Unlike with Parcel and other build tools, we render the entire DOM structure with Next, from the root <html> tag, the <body> tag, and everything else. There are no .html files in a Next project.
  • By default, the "root" layout.js and page.js will be used when visiting the site (eg. localhost:3000 or mywebsite.com). We can nest directories if we want to create additional URLs.
  • For example, if we create /src/app/about/page.js, that component will be shown when visiting localhost:3000/about. The layout.js will be reused by default.
  • This is the fundamental flow with Next. We create a bunch of page.js files that mirror the routes we want to be accessible in-browser. The Next.js App Router includes a bunch of other fancy customizations, and we'll see some of them in this course, though we won't go too deep.
  • All components in Next.js are server components by default. If we try to add a React.useEffect() call, we'll get an error. We can convert any component to a Client Component with the "use client" directive.
  • Next.js is my favourite way to work with React, and this is a particularly exciting time!

Note: In this video, I briefly show a project setup using Create React App, because this was the build tool originally used for the first two projects. I've since migrated these projects to use Parcel. Fortunately, Parcel and Create React App are structured the same way, and so the comparison is still relevant.

If you'd like to play around with this minimal starter, you can access it here: