npm install --global create-next-app  
npx create-next-app

npm install bootstrap

npm install --save-dev typedoc-plugin-missing-exports
npm install --save-dev typedoc-umlclass
npm install --save-dev typedoc

import "bootstrap/dist/css/bootstrap.min.css";
import type { AppProps } from "next/app";
import { useEffect } from "react";

export default function App({ Component, pageProps }: AppProps): any {
  useEffect(() => {
    require("bootstrap/dist/js/bootstrap.bundle.min.js");
  }, []);
  return <Component {...pageProps} />;
}

npx eslint --init

? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
▸ To check syntax, find problems, and enforce code style
? What type of modules does your project use? … 
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these
? Which framework does your project use? … 
▸ React
  Vue.js
  None of these
? Does your project use TypeScript? ‣ No / [Yes]
? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
▸  Browser
   Node 
? How would you like to define a style for your project? … 
▸ Use a popular style guide
  Answer questions about your style
? Which style guide do you want to follow? … 
▸ Standard: https://github.com/standard/eslint-config-standard-with-typescript
  XO: https://github.com/xojs/eslint-config-xo-typescript
? What format do you want your config file to be in? … 
  JavaScript
  YAML
▸ JSON
? Missing packages. Would you like to install them now? ‣ No / [Yes]

npm install --save-dev prettier
npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-prettier
npm install --save-dev eslint-config-next 

**/node_modules/*
**/out/*
**/.next/*
**/next-env.d.ts
**/next.config.js
**/docs/*
**/storybook/*
**/storybook-static/*

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "standard-with-typescript",
    "prettier", //<-- add this
    "plugin:@next/next/recommended" //<-- add this
  ],
  "overrides": [],
  "parserOptions": {
    "project": ["tsconfig.json"], //<-- add this
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "react",
    "prettier" //<-- add this
  ],
  "rules": {
    "prettier/prettier": ["error"], //<-- addthis
    "@typescript-eslint/no-misused-promises": ["error", { "checksVoidReturn": false }], //<-- add this
    "react/prop-types": "off", // <-- add this
    "react/react-in-jsx-scope": "off", // <-- add this
    "react/jsx-props-no-spreading": "off" // <-- add this
  }
}

npm install --save next-auth

import { useRouter } from 'next/router'

export default function Home() {
    const router = useRouter();
    const {myrouteINPUT} = router.query;
    return(<div>
        <h1>hi the text in the url parameter is {myrouteINPUT}
        </h1>
    </div>)
}

npm run build
npm run export

/** @type {import('next').NextConfig} */
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')

let isProd = process.env.myEnv === "prod";
module.exports = (phase, { defaultConfig }) => {
  if (phase === PHASE_DEVELOPMENT_SERVER){ isProd = false };  
  return {
    /* config options for all phases except development here */
    reactStrictMode: true,
    assetPrefix: isProd ? "/MathematicaDocNetwork" : undefined, //static assets are in the /out folder
    basePath: isProd ? "/MathematicaDocNetwork" : undefined,
    experimental: {
      images: {
        unoptimized: true,
      },
    }
  }
}

interface IServerData {
  serverData: any;
}
export default function Home({ serverData }: IServerData): any {...}

export async function getStaticProps(): Promise<any> {
  const getData = async (
    url = "https://api.github.com/repos/userJY/someRepo/contents/ooout.json"
  ): Promise<any> => {
    // Default options are marked with *
    const response = await fetch(url, {
      method: "GET", // *GET, POST, PUT, DELETE, etc.
      mode: "cors", // no-cors, *cors, same-origin
      cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
      credentials: "same-origin", // include, *same-origin, omit
      headers: {
        Authorization:
          "token github_pat_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
        Accept: "application/vnd.github.v3.raw",
        "Content-Type": "application/json",
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },
      redirect: "follow", // manual, *follow, error
      referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
    });
    return await response.json(); // parses JSON response into native JavaScript objects
  };

  const serverData = await getData();
  // console.log("terminal:[size]", BLEHdata); // this will not output on browser but in terminal
  return {
    props: { serverData },
    revalidate: 100,
  };
}