# 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/")[](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/")[](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")[](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/")[](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")[](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")[](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")[](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")[](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/")[](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")[](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")[](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](https://mui.com/customization/color/).
### Default values
You can explore the default values of the palette using [the theme explorer](https://mui.com/customization/default-theme/?expand-path=$.palette) 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 (
);
}
```
### 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/")[](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")[](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](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](https://nextjs.org/docs/api-routes/dynamic-api-routes) and [getServerSideProps](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering) 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](http://stackblitz.com/):
### Deploy your own
Deploy the example using [Vercel](https://vercel.com/?utm_source=github&utm_medium=readme&utm_campaign=next-example):
### How to use
Execute `[create-next-app](https://github.com/vercel/next.js/tree/canary/packages/create-next-app)` with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) 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 StackBlitz*stackblitz.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")[](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/](https://nextjs.org/)