NextJS Quickstart Guide

NextJS is an outstanding leap in front end web devlopment (This site is built using it), but create-next-app doesn’t quite do everything you want when getting going.

This tutorial walks you through cleaning up everything that isn’t necessary, but also walks you through implementing some basic functionality so you can get going quickly.

This is also a recommended file structure if you arent certain on a good place to start, although your file directories should conform to your own design in the long run.

Installation and Cleanup

Run npx create-next-app@latest . --typescript

/Public Delete Vercel.svg

/Pages/index.ts

Delete everything from <main> to </footer>

Re-add <main> tags, this is where your code will go, e.g <HomePage />

/Pages/_app.ts Add any css modules here (eg bootstrap)

yarn add boostrap

ln:1 import 'bootstrap/dist/css/bootstrap.css'

/Styles/globals.css

Remove everything except the * {} FYI, anything in the brackets is available anywhere in your app

Delete everything inside Home.modules.css

Global Components

This is just my personal opinion for any components your whole app will use

Create a components folder at the root

Add new folders for any new componenets (e.g ‘Navbar’, ‘Card’ ‘Footer’ etc)

Inside the folder, make a .ts file with the same name (Where you export default)

Decide how you’d like to handle styles, you could embed them directly on every component, have a styles const in your file, have an external exported const or use old fasioned .css

To use css modules:

Create a .css file called <folder-name>.module.css. This is where you put the componeents css

Then import it into the componenent with import styles from './<component-name>.module.css'

To use css by className, e.g <div className={styles.<css-property>} > or if it has an ‘-’ in the css properties name: <div className={styles["<css-property>"]} >

Routing

Static pages

Create a new folder with the name of the page you want

Inside, add a new file called index.ts

Import react and export a default ‘indecomponent called ‘index’

Anything in here will be loaded when that page is accessed

Test the page with http:localhost:3000/<file-name>

Dynamic pages

Create a folder under pages with the resource link you want your page to be under and add a file with the name of a param in square brakcets, (eg [id].js )

Create the usual component

Access the param (file name) by using const { param } = router.query; For example, use the param to query an api end point which when returned will load your page or redirect away

Link

Redirect to other pages by importing import { useRouter } from "next/router"; then instanctiate it with const router = useRouter(); and add a function such as onlick pointing at the url you want, e.g () => router.push("/Home")

Layouts

Layouts let you create a resuable overlay that all pages can be contained within, eg something with a navbar & footer

Create a ‘layouts’ folder in the root and a DefaultLayout.js file. Fill it with a normal export default componenent jargon

Copy this template if you wish, fyi it doesnt have to be called DefaultLayout:


const DefaultLayout = ({ children }) => {
  return (
    <div>
      <Nav />
      <main>{children}</main>
      <Footer />
    </div>
  );
};
export default DefaultLayout;

Then wrap any other pages inside it, eg:


<DefaultLayout>
   <SomePage /> // App will fill in the {children} prop
</DefaultLayout>

API Any files within the pages/api folder can return json instead of js or webpages. Code served from here can be backend specific 🙂

Under api, create a new folder for a resource that you’d like in your backend

Create an index.js file, this can return all of that resource (for example)

For dynamic resources, Add another file with any specific name in square brackets (e.g. [id].js)

Copy the logic from hello.js and destructure the files name from req, (e.g const { id } = req.query )

To get a specific item from a json object, use this:


export default function handler(req, res) {
  const { id } = req.query;
  const subItem = aJsonObject.find((item) => item.id === Number(id))

  res.status(200).json(subItem);
}

You can call this api within your code using something like this anywhere in your code:


const fetchStuff = async () => {
    const response = await fetch(`/api/<some-resource>/${id}`);
    return await response.json();
  };

Head

Within the head tags inside the initial pages/index.js make sure you have the following:


<Head>
	<title>App Name</title>
	<meta name="Insert Description" content="Stuff for SEO" />
	<link rel="icon" href="/favicon.ico" />
</Head>

Add the it inside actual pages to override and give them unique info, just make sure to import Head from "next/head"; at the top of each file

Quickstart: NextJS

Installation and Cleanup

Global Components

Routing

Guides and practical notes, training references, and code snippets shared freely for learning and career growth.