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

¨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

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

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

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…

Import _document.js

material-ui/_document.js at master · Software-Engineering-2030/material-ui

• Import _document.js to _document.tsx

Import theme.js

material-ui/theme.js at master · Software-Engineering-2030/material-ui

material-ui/createEmotionCache.js at master · Software-Engineering-2030/material-ui

6. MUI Components

Basic Button

Componente React para Botão - MUI

Basic Button

7. MUI Templates

React themes & templates | MUI Store

8. NextJS Reusable Components

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

App Bar React component - MUI

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

npm install swr

12. Login Page

State Less Authentication Strategy with NextJS

• with Cookie Cryptographic

npm install iron session

Authentication | Next.js

Example application using 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.

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.
• 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 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 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

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<Data>
) {
res.status(200).json({ name: 'John Doe' })
}

13. NextJS Application Demo

14. References

• https://nextjs.org/