Next JS Resources and Documentation

React Base Level Commands

Creating a Root Element and Rendering to Index.js

The Assumption is made that index.html contains a div with ID of ‘app’

import React from "react";

import { createRoot } from "react-dom/client";

import App from "./App";

  

createRoot(document.getElementById("app")).render(<App />);

Top Level Imports

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

Creating Next.JS App

npx create-next-app@latest ./ –> once running GitBash in directory/folder you want

File Structure:

App (main directory)

—>layout.jsx (is layout that wraps all pages, pass {children} as props (children of other pages)) —>page.jsx (should be the homepage for app)

–> API (sub-directory in app)

api routes/handlers

->sub-directory of any name (sub-directory in app)

page.jsx

-> components (sub-directory in app)

Nav.jsx Header.jsx Footer.jsx AnyOtherComponent.jsx

-> models (sub-directory in app)

-> public (sub-directory in app)

–> assets (sub-directory in app)

->styles (sub-directory in app)

globals.css

-> utils (sub-directory in app)

Would house database.js if you were using a serverless DB (MongoDB)

.env (environment variables file) (in app folder)

Deploying Next.js with Vercel

Ensure .env file is added to gitignore .env underneath the #dependencies section

YouTube tutorial of Next.js deployment on Vercel: Link Text

–> Ensure project and file structure is correct, then ensure project is pushed to PUBLIC git repository

–> Add New (Project)

–> Ensure GitHub allows access to all repos to Vercel

–> Click Import

–> Root directory/Build and output settings remain the same

–> Add .env variables to Environment Variables within settings of project deployment

React and Next.JS General Notes

The best Crash Course Link Text

rafce command to create a react arrow function component with es7+ React/ReactNative/ReduxSnippets extension in VS.Code

Using Hooks/States or anything similar ALWAYS “use client”; directive at top as these should be handled from client side.

Link Text

Using Routing in Next.JS (can nest folders, simply uses folders as routes)

–> APP (overall directory)

–> any sub folder within app directory is a route

Using Dynamic Routing

Create folder with square brackets [folder] and then files inside can be dynamically rendered for slugs