Next.js Introduction: What is Next.js

framework around Reactjs
allowed to server-side render (SSR) app

Features nice to have experience

hot code reloading (with react fast refresh)
styling options
typescript support
automatic code-splitting
page-based routing

Next.js Project Setup

create a new folder in command line

npm init
npm install next react react-dom

Create “pages” directory with index.js file to handle the routing. No need to import react cause it’s already in.
Create a function Home to return some HTML
Run command “npm run dev” for “next dev”
Open localhost:300 to see the result
Add to gitignore the “.next” directory !

Next.js Deployment

Write a netlify.toml file to pass the config for Netlify about the deployment
Add git repo on Netlify
Deploy site

Next.js Pages and Content

Nextjs load on the code needed

call api at build time to render the html page

export async function getStaticProps() {
  const res = await fetch("https://pokeapi.co/api/v2/pokemon/charmander");
  const pokemon = await res.json();

  return {
    props: {
      pokemon,
    },
  };
}

Next.js Head API

allow appending the head of a page

import Head from "next/head";

add Head block

<Head>
  <title>My Next.js Site!</title>
  <meta name="viewport" content="initial-scale=1.0" width="device-with" />
</Head>

Next.js Routing and Links

to use link

import Link from "next/link";

add link block with a inside

<Link href="/">
  <a>Go back home</a>
</Link>

use Router in any component of the application

import { useRouter } from "next/router";

const router = useRouter();

  const handleClick = (e) => {
    e.preventDefault();
    router.push("/pokemon");
  };

Next.js Dynamic Routes

rename a file with brackets like => [pokemon].js make it a Dynamic Route

export async function getStaticPaths() {
  const res = await fetch("https://pokeapi.co/api/v2/pokemon?limit=151");
  const pokemon = await res.json();

  let paths = pokemon.results.map((p) => {
    return `/pokemon/${p.name}`;
  });

  return {
    paths,
    fallback: false,
  };
}
export async function getStaticProps({ params }) {
  const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${params.pokemon}`);
  const pokemon = await res.json();

  return {
    props: {
      pokemon,
    },
  };
}

Next.js Server-Side Rendering with next-on-netlify

fallback: false,

Means that when it’s undefined it will fall false

When it’s “true” the path will render HTML at build time and turn the page as a server render component => use next-on-netlify lib with Netlify function

Don’t work on the export of standard next.js. With this, you can render a page that doesn’t require specific paths.

Next.js Styling

global style is mapped at the App level create an _app.js file

import '../style.css'

export default function Application({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Restart your local server to see the change every time you update the application file can use custom CSS module, jsx style or other CSS

import styles from "./Pokemon.module.css";

      <div className={styles.container}>
        Welcome, {pokemon?.name}!
        <img src={pokemon?.sprites.front_default} />
      </div>

Next.js Performance

Option for measuring performance

Use reportWebVitals function from Nextjs You can measure any supported metric through Nextjs

Measuring performance

      //First Contentful Paint (FCP)
      //Largest Contentful Paint (LCP)
      //Cumulative Layout Shift (CLS)
      // First Input Delay (FID)
      // Time to First Byte (TTFB)
      // length of time it take to start and finsh hydrating
      // length of time it take to start rendering afer route change
      // length of time it take to finish rendering after route change

you can do simple

      console.log(metric)

Or you can do more powerful

goes to your chosen analytics platform
post request to a certain API that you've built to measure things

Resources

Netlify explorers resources

⚙ Next.js from the Ground Up

Netlify Explorers

Table of contents