1️⃣Next.js first page

creating the "hello world" of Next.js

Now that we have the foundation setup for building our Next.js app, let's build our first page:

Homepage

  • In the app folder, create a file called page.tsx

app/page.tsx
export default function Main() {
    return (
        <h1>Home</h1>
    )
}

  • Alright, this gets as basic as it can get, now let's see it in action:

npm run dev

  • This will open up localhost:3000 on the browser

    • We should see a simple page with "Home"

    • Every saved change we make to page.tsx will immediately hot reload the browser

Layout

  • We will notice that Next.js also generates a file called layout.tsx

    • This file produces the root structure for our web app

    • We cannot delete or rename layout.tsx but we can make changes to it

  • At its barest, the root layout consists of metadata and the RootLayout function

    • The metadata comes with a title and description for SEO purposes

    • The RootLayout carries the high-level DOM: html and body

      • {children} , as we can guess, refers to the DOM in page.tsx

app/layout.tsx
export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Test the Tailwind styles (optional)

  • Let's also test the Tailwind we added previously

  • In layout.tsx import the global.css file

app/layout.tsx
import "./global.css"

export const metadata = {
  title: 'jonovert',
  description: 'converting units of measurements',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

  • Finally, in app/page.tsx let us test a few styles in the <h1> tag:

app/page.tsx
export default function Main() {
    return (
        <h1 className="font-mono text-5xl">Home</h1>
    )
}

  • Have a look at localhost:3000 and, as opposed to "Home" in the default serif font", something like this should appear:

PreviousNext.js setupNextNext.js nth page

Last updated