Next.js Quickstart (Coming Soon)

This tutorial assumes you’re already familiar with HTML, CSS, JS, and npm. It also assumes you know what a JS framework is for.

Setup

First, visit the Next.js training ground repo. Press the green Code button and click Download ZIP. Unzip the file and then open it in your editor. Then, run this command in the terminal to install the packages listed in package.json.

npm install

Then run this command to start the dev server.

npm run dev

You should see something like this in your terminal.

> next-training-ground@0.1.0 dev
> next dev

   ▲ Next.js 15.3.1
   - Local:        http://localhost:3000
   - Network:      http://192.168.0.31:3000

 ✓ Starting...
 ✓ Ready in 1033ms

Visit localhost:3000 in your browser. The web page should say Hello World.

In your editor, you’ll see several files. However, for now you’ll mainly be working in app/page.js.

Stackblitz

If you prefer to work online, you can also open the Next.js training ground repo on Stackblitz and start coding right away in your browser. You don’t have to run any of the npm commands if you use Stackblitz.

Create a page

To create an about page, create a folder called about inside the app folder. Then create a file called page.js inside the about folder. Add the following code to it.

export default function About() {
  return (
    <div>
      <main>
        <h1>About</h1>
      </main>
    </div>
  );
}

Create a link

To link to the about page from the home page, first import the <Link> component at the top of the page.js file. Then you can insert a <Link> component below the <h1> element.

import Link from "next/link";

export default function Home() {
  return (
    <div>
      <main>
        <h1>Hello World</h1>
        <Link href="/about">About</Link>
      </main>
    </div>
  );
}

Image component

To add an image, you can use the <Image> component. First, import the <Image> component at the top of the file. Then you can use it below the <h1> element.

import Image from 'next/image';
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <main>
        <h1>Hello World</h1>
        <Image
          src="/next.svg"
          alt="Next.js Logo"
          width={150}
          height={30}
        />
        <Link href="/about">About</Link>
      </main>
    </div>
  );
}

Layout

Before we look at our next topic, open up layout.js so you can see how it affects the other files. The page.js files insert their content where the children prop is.

export const metadata = {
  title: 'Next.js Training Ground',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Fonts

To use a Google Font, you need to import it from next/font/google. Then, call it as a function. Lastly, set the className of the element you want to modify.

import { Geist } from 'next/font/google'

const geist = Geist({
  subsets: ['latin'],
})

export const metadata = {
  title: 'Next.js Training Ground',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={geist.className}>{children}</body>
    </html>
  );
}

Metadata

To add metadata to a page, export a Metadata object.

export const metadata = {
  title: 'About | Next.js Tutorial',
  description: 'Learn more about this Next.js project.',
};

export default function About() {
  return (
    <div>
      <main>
        <h1>About</h1>
      </main>
    </div>
  );
}

Global styles

To add a global style, add your rule to the globals.css file. Then import it at the top of the layout.js file.

h1 {
  color: red;
}

import './globals.css';

export const metadata = {
  title: 'Next.js Training Ground',
  description: 'Generated by create next app',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

CSS modules

To apply a rule just to the home page, add your rule to the page.module.css file. Then import it at the top of the page.js file. In this example, we’re importing the CSS file as styles.

.title {
  color: blue;
}

import styles from './page.module.css';
import Image from 'next/image';
import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <main>
        <h1 className={styles.title}>Hello World</h1>
        <Image
          src="/next.svg"
          alt="Next.js Logo"
          width={150}
          height={30}
        />
        <Link href="/about">About</Link>
      </main>
    </div>
  );
}