Next.js — From Zero to Hero

Photo by Zan on Unsplash

What even is Next.js?

  1. Bundling and compiling code
  2. Production optimizations (i.e. code splitting)
  3. Statically pre-rendering pages
  4. Writing server-side code to interact with your data store
  1. Built in CSS and SASS support
  2. Routing
  3. API Routes (neat!)

Pages

Links

import Link from 'next/link'
<Link href='/samplepage/sample'>Sample Page </Link>

Static Assets, Metadata and CSS

<img src="/someimage.jpg" alt="Some Image" className="logo" />
This will render the static/someimage.jpg file.
<html><head><title>This is my title!</title></head></html>
Importing Head component from Next.js
Pulled directly from next.js.org

Pre-rendering & Data Fetching

  1. Static Generation — This is the method that generates your HTML at runtime. The HTML gets reused with each request speeding up load times
  2. Server-side Rendering — Generates HTML on each request

Dynamic Routes

  1. Create a page inside page/<route_name>/[id].js (route_name being some arbitrary name)
  2. Implement getStaticPaths function (this will return a array of possible values that code be the id) (More info here: https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticpaths)
  3. Implement getStaticProps which will use the id to fetch the appropriate data

API Routes

export default (req, res) => {
res.status(200).json({ text: 'Hello' })
}

Thats it! Of course, there is still a ton of features to learn about Next.js, but you should now have a good overview of the framework and how it works.

Give it a try yourself!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shayan Tabaei

Shayan Tabaei

Software Developer, learning by teaching.