Next.js 101 - Free Online Course

Learn how to build a simple landing page with Next.js

Introduction and Setup

App and Document

Document Structure


_app.js is a special component that is used to initialize every page. This is a place where you would do anything that needs to affect all pages, eg. load a global stylesheet.

Read more about custom App.

// /pages/_app.js
import '../styles/tailwind.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />

export default MyApp


_document.js forms the overall structure of the HTML. If you need need to modify the html or body tags, _document.js is the place to do this.

If you are chasing the perfect Lighthouse score, you will need to add the lang attribute to the html tag.

We will also change the page background color here. Set the className for body to bg-gray-100.

Read more about custom Document.

// /pages/_document_.js
import Document, { Head, Html, Main, NextScript } from "next/document";

export default class MyDocument extends Document {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body className="bg-gray-100">
          <Main />
          <NextScript />

Enjoying this course? Subscribe for more content from Petr.

Petr Tichy
Front-end Developer

Petr is a passionate front-end developer who likes to build cool products and teach along the way.