⚙ Next.js from the Ground Up
Netlify Explorers
French software engineer building a new life in Japan. My journey here is a big challenge—from learning the language to navigating the tech scene. I use this blog as a space to share what I'm learning, both in tech and in life.
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
//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
