NextJs & ReactJs

 NEXT JS - 4 stars from EBW

https://github.com/LinkedInLearning/learning-nextjs-2491193
  b  = begin
  e  = end

lipsum.com

reactjs.org
   Client-side rendering CSR

Jamstack
   1) Pre-rendering 2) decoupled
   
   NEW FEATURE in Next.JS - "Fast refresh" - Example: say counter=5 will change
the style. So keeps state so no need to refresh if was 5 and change style.
Example 2: Would help auth and other types of state.

nextjs.org - by Vercel - subset of Jamstack
   Server-side rendering SSR  (a.k.a. hydration)
   benefit: fast development, flexible and responsive, zero config, rich user experience, SEO, site performance


nodejs.org/en/ - dependency on 12.20 or later

React developer tools:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

npm or yarn to create
npx


pages/index.js  (say Route: http://localhost:3000/ )
pages/hello.js  (say Route: http://localhost:3000/hello )
  (inside:    export default function Hello() {
                 return ( <h1> Hello NextJS</h1> )
              }
   )

use brackets for dynamic routing like pages/[temp]

Next.js has a file-system based router built on the concept of pages. When a file is added to the pages directory, it's automatically available as a route.

In Next.js, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.

Data Fetching
  Server Side Rendering (SSR) - for freq. updates OR dynamic routes
    getServerSideProps - runs at request time, during next link or router

        const API_KEY = "9hUv"
        export async function getServerSideProps() {
                 const URL = 'https://api.nytimes.com/src/articlesearch.json?q=${params.query}&api-key=${API_KEY}'
                 const result = await search(URL)

                 return { props : { results,
                                    query : params.query } }
              }
    

      hydration - server statically sends HTML files,
  browser downloads JS, browser executes React, page visible and interactive.
      
  Static site generation (SSG) - for static content with no user input
    getStaticPathsProps - at build time, next/build - for pre-render content from a headless CMS

        const API_KEY = "9hUv"
        export async function getStaticPathsProps() {
                 const URL = 'https://api.nytimes.com/src/home.json?api-key=${API_KEY}'
                 const response = await fetch(URL)
                 const data = await response.json()

                 return ( props : { results: data.results } }
              }

    getStaticPaths - use when static content or generate paths in advance

        export async function getStaticPaths() {
                 return { paths : [ params: { path: 'top-stories' } ],
                          paths : [ params: { path: 'popular' } ],
                          fallback: true
                        };
              }
        const API_KEY = "9hUv"
        export async function getStaticPathsProps({params}) {
                 const TOP_STORIES_URL = 'https://api.nytimes.com/topstories/home.json?api-key=${API_KEY}'
                 const POPULAR_URL = 'https://api.nytimes.com/mostpopular/home.json?api-key=${API_KEY}'
                 const results =

                 switch(params.path) {
                    case 'top-stories':
                        return { props : { results: await handler(TOP_STORIES_URL),
                                    title: "Top Stories" } }
                    case 'popular':
                        return { props : { results: await handler(POPULAR_URL),
                                    title: "Popular" } }

                    default:
                        return { props : null } }
              }

  CSR: Client-side rendering - Javascript

  Fallback page - 404.js
     import Layout from "../../components/Layout"
     export default function NotFound() {
          return ( <Layout><h1> Not Found </hi></Layout> )
     }

global styles
  pages/_app.js
    inside create globals.css with h1 { color: blue; }
scoped CSS modules
   Layout.module.css with  .container { width: 80%; margin 1.5 rem auto }
styled JSX for CSS in JS
   <style jsx> default tag
load static image with import Image  and import gif
   <image src={gif} alt="not found" width="75" height="75"/>

back to prior page:  
   const router = useRouter();
   in links.map(link => {
     const className = link.path === router.asPath ? styles.active : styles.link;

   then import { useRouter } from 'next/router'
       const router = useRouter();
       const goBack = () => { router.back() }
   
       <a href="#" onClick={goBack}>Back</a>