NextJS Guide

Summary

1. NextJS Introduction
2. NextJS Concepts
3. NextJS Coding
4. Axios HTTP Client
5. Material UI
6. MUI Components
7. MUI Templates
8. NextJS Reusable Components
9. MUI Colors
10. MUI Tables
11. SWR — React Hooks for Data Fetching
12. Login Page
13. NextJS Application Demo
14. References

1. NextJS Introduction

Compare NextJS vs ReactJS

2. NextJS Concepts

The React Framework for Production

Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Server-Side Rendering (SSR)

Client-Side Rendering (CSR)

Differences SSR vs CSR

Client-Side Rendering (CSR)

React Components

• Single Page Application (SPA)

[React - A JavaScript library for building user interfaces
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React…reactjs.org](https://reactjs.org/ "https://reactjs.org/")

¨create react app

Cons Client-Side Rendering (CSR)

• E-Commerce
• SEO
• Too much feature on the Client
• Management Data Navigation
• Memory Leaks
• Virtual DOM

Server-Side Rendering (SSR)

[Next.js by Vercel - The React Framework
Production grade React applications that scale. The world's leading companies use Next.js by Vercel to build static and…nextjs.org](https://nextjs.org/ "https://nextjs.org/")

What is NextJS ?

• NextJS = NodeJS + ReactJS

Benefits Serer-Side Rendering (SSR)

• Setup Zero Config
• Use TypeScript
• Strongly Typed Language
• Best Performance for Rendering
• Takes responsibility from the browser to the server
• Positioning with SEO
• Possibility to Disable JavaScript in Browser
• Possibility to work only with HTML and CSS
• API Routes
• Backend Integration

3. NextJS Coding

GitHub Repository

[GitHub - Software-Engineering-2030/NextJS-Guide: NextJS-Guide
This is a Next.js project bootstrapped with create-next-app . First, run the development server: Open…github.com](https://github.com/Software-Engineering-2030/NextJS-Guide "https://github.com/Software-Engineering-2030/NextJS-Guide")

Initialize NextJS Project

npx create-next-app --typescript

npm run dev

localhost:3000

VS Code Extensions — ReactJS Code Snippets

Pages Static & Dynamic

npm run build

4. AXIOS HTTP Client

[Axios
Axios is a simple promise based HTTP client for the browser and node.js. Axios provides a simple to use library in a…axios-http.com](https://axios-http.com/ "https://axios-http.com/")

npm install axios

5. Material UI

• mui.com

npm install @mui/material

npm install @mui/icons-material

npm install @emotion/cache

npm install @emotion/react

npm install @emotion/server

npm install @emotion/styled

[GitHub - Software-Engineering-2030/material-ui: MUI (formerly Material-UI) is the React UI library…
MUI (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with…github.com](https://github.com/Software-Engineering-2030/material-ui "https://github.com/Software-Engineering-2030/material-ui")

Import _document.js

[material-ui/_document.js at master · Software-Engineering-2030/material-ui
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below…github.com](https://github.com/Software-Engineering-2030/material-ui/blob/master/examples/nextjs/pages/_document.js "https://github.com/Software-Engineering-2030/material-ui/blob/master/examples/nextjs/pages/_document.js")

• Import _document.js to _document.tsx

Import theme.js

[material-ui/theme.js at master · Software-Engineering-2030/material-ui
You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com](https://github.com/Software-Engineering-2030/material-ui/blob/master/examples/nextjs/src/theme.js "https://github.com/Software-Engineering-2030/material-ui/blob/master/examples/nextjs/src/theme.js")

[material-ui/createEmotionCache.js at master · Software-Engineering-2030/material-ui
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below…github.com](https://github.com/Software-Engineering-2030/material-ui/blob/master/examples/nextjs/src/createEmotionCache.js "https://github.com/Software-Engineering-2030/material-ui/blob/master/examples/nextjs/src/createEmotionCache.js")

6. MUI Components

Basic Button

[Componente React para Botão - MUI
Botões permitem que os usuários tomem ações e decisões com um simples toque. Botões comunicam ações que os usuários…mui.com](https://mui.com/pt/components/buttons/ "https://mui.com/pt/components/buttons/")

Basic Button

7. MUI Templates

[React themes & templates | MUI Store
This is a collection of the best React templates, React dashboard, and React themes. Our collection was curated by…material-ui.com](https://material-ui.com/store/#populars "https://material-ui.com/store/#populars")

8. NextJS Reusable Components

• Navbar
• mkdir /src/components
• navbar.tsx

[App Bar React component - MUI
The App Bar displays information and actions relating to the current screen. The top App Bar provides content and…mui.com](https://mui.com/components/app-bar/#main-content "https://mui.com/components/app-bar/#main-content")

Card

9. MUI Colors

Palette colors

The theme exposes the following palette colors (accessible under theme.palette.):

• primary — used to represent primary interface elements for a user. It’s the color displayed most frequently across your app’s screens and components.
• secondary — used to represent secondary interface elements for a user. It provides more ways to accent and distinguish your product. Having it is optional.
• error — used to represent interface elements that the user should be made aware of.
• warning — used to represent potentially dangerous actions or important messages.
• info — used to present information to the user that is neutral and not necessarily important.
• success — used to indicate the successful completion of an action that user triggered.

If you want to learn more about color, you can check out the color section.

Default values

You can explore the default values of the palette using the theme explorer or by opening the dev tools console on this page (window.theme.palette).

Primary

10. MUI Tables

npm install @mui/x-data-grid@next

import * as React from 'react';  
import { DataGrid } from '@mui/x-data-grid';  

const columns = [  
  { field: 'id', headerName: 'ID', width: 70 },  
  { field: 'firstName', headerName: 'First name', width: 130 },  
  { field: 'lastName', headerName: 'Last name', width: 130 },  
  {  
    field: 'age',  
    headerName: 'Age',  
    type: 'number',  
    width: 90,  
  },  
  {  
    field: 'fullName',  
    headerName: 'Full name',  
    description: 'This column has a value getter and is not sortable.',  
    sortable: false,  
    width: 160,  
    valueGetter: (params) =>  
      `${params.getValue(params.id, 'firstName') || ''} ${  
        params.getValue(params.id, 'lastName') || ''  
      }`,  
  },  
];  

const rows = [  
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },  
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },  
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },  
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },  
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },  
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },  
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },  
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },  
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },  
];  

export default function DataTable() {  
  return (  
    <div style={{ height: 400, width: '100%' }}>  
      <DataGrid  
        rows={rows}  
        columns={columns}  
        pageSize={5}  
        rowsPerPageOptions={[5]}  
        checkboxSelection  
      />  
    </div>  
  );  
}

11. SWR — React Hooks for Data Fetching

[React Hooks for Data Fetching - SWR
React Hooks for Data Fetching The name "SWR" is derived from stale-while-revalidate, a HTTP cache invalidation strategy…swr.vercel.app](https://swr.vercel.app/ "https://swr.vercel.app/")

npm install swr

12. Login Page

State Less Authentication Strategy with NextJS

• with Cookie Cryptographic

npm install iron session

[Authentication | Next.js
Authentication verifies who a user is, while authorization controls what a user can access. Next.js supports multiple…nextjs.org](https://nextjs.org/docs/authentication "https://nextjs.org/docs/authentication")

Example application using [iron-session](https://github.com/vvo/iron-session)

👀 Online demo at https://iron-session-example.vercel.app

This example creates an authentication system that uses a signed and encrypted cookie to store session data. It relies on [iron-session](https://github.com/vvo/iron-session).

It uses current best practices for authentication in the Next.js ecosystem and replicates parts of how the Vercel dashboard is built.

Features of the example:

• API Routes and getServerSideProps examples.
• The logged in status is synchronized between browser windows/tabs using useUser hook and the [swr](https://swr.vercel.app/).
• The layout is based on the user’s logged-in/out status.
• The session data is signed and encrypted in a cookie (this is done automatically by iron-session).

[iron-session](https://github.com/vvo/iron-session) also provides:

• An Express middleware, which can be used in any Node.js HTTP framework.
• Multiple encryption keys (passwords) to allow for seamless updates or just password rotation.
• Full TypeScript support, including session data.

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

Execute [create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with npm or Yarn to bootstrap the example:

npx create-next-app --example with-iron-session with-iron-session-app
# or
yarn create next-app --example with-iron-session with-iron-session-app

[Next.js With Iron Session Example - StackBlitz
Run official live example code for Next.js With Iron Session, created by Vercel on StackBlitzstackblitz.com](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-iron-session "https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-iron-session")

NextJS API

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

import type { NextApiRequest, NextApiResponse } from 'next'

type Data = {

name: string

}

export default function handler(

req: NextApiRequest,

res: NextApiResponse

) {

res.status(200).json({ name: 'John Doe' })

}

13. NextJS Application Demo

14. References

• https://nextjs.org/