pushing notes and content about custom 404 pages

Author: justinTsugranes

README.md

@@ -15,6 +15,15 @@ It is the best tutorial series on Next.js by far and is over 70 videos long.
 - Navigating Programmatically
 - Custom 404 Pages
 - Pre-rendering and Data Fetching
+  - Types of Pre-Rendering
+    - Static Generation
+      - with and without data
+      - Incremental Static Generation
+      - Dynamic Paramters when fetching data
+    - Server-side Rendering
+      - Data fetching
+    - Client-side Data Fetching
+    - Combining pre-rendering with client-side data fetching
 - Static Generation
 - Static Generation with g etStaticProps
 - Pages vs Components

notes/README.md

@@ -0,0 +1,26 @@
+# Supplemental Notes
+
+## Notes that don't belong in the code
+
+### Difference between rendering methods in React and Next
+
+By default, Next JS pre-renders every page in the application. This means that it generates HTML for each page in advance insead of having it all done by client-side JavaScript
+
+In a React app, the JavaScript is loaded which then executes to load the HTMl elements onto the DOM. We just have a div tag with Id tag equal to root. Once the javascript for the page is loaded, it will exceute in the browser, create the different DOM nodes and mount them onto the root div element. This process is called Hydration.
+
+In a Next app, the pages are pre-rendered automatically by default, meaning the HTML is already generated with the necessary data and then sent to the browser. The JS then loads and makes the page interactive.
+
+#### Why pre-render?
+
+1. Pre-rendering improves performance
+   1. In a react app, you need to wait for the JavaScript to be executed
+   2. Perhaps fetch data from an external API and then render the UI
+   3. There is a lag time for the user
+   4. With a pre-rendered page, the HTMl is already generated and loads faster
+2. Pre-rendering helps with SEO
+   1. This isn't as big of an issue with sites that are built behind a login screen, but if you're building a blog or an e-commerce site, then SEO is a concern.
+   2. With a react app, if the search engine hits your page, it only sees a div tag with id equal to root.
+   3. If search engines hit a pre-rendered page, all the content is present in the source code which will help with crawlers that are indexing the page.
+   4. If SEO is of concern for app, then pre-rendering is what you want
+
+#### How do you pre-render?

pages/404.js

@@ -0,0 +1,11 @@
+// To create a custom 404 page, all you have to do is create a 404.js file in the pages folder. The file name has to be 404.js and nothing else.
+
+// define a component
+
+function PageNotFound() {
+  return <h1>404 Page with all the custom styling necessary</h1>
+}
+
+export default PageNotFound
+
+// not worried about styling the page at the moment.... just trying to get an understanding on how to define the custom 404 page.

pages/index.js

@@ -1,6 +1,13 @@
 import Link from 'next/link'
+import { useRouter } from 'next/router'
 
 function Home() {
+  const router = useRouter()
+
+  const handleClick = () => {
+    console.log('Placing your order')
+    router.push('/product')
+  }
   return (
     <>
       <h1>Home Page</h1>
@@ -10,8 +17,41 @@ function Home() {
       <Link href='/product'>
         <a>Products</a>
       </Link>
+      <button onClick={handleClick}>Place Order</button>
     </>
   )
 }
 
 export default Home
+
+/*
+
+### Routing Summary
+
+Next.js uses a file based routing system.
+
+- Page Based Routing System - Pages are associated with a route based on their file name.
+
+- Nested Routes are a nested folder structure where files will be automatically routed in the same way in the URL.
+
+- Dynamic Routes can be created by adding square brackets to a page name.
+
+- Catch All Routes - add three dots (like a spread operator) inside square brackets to create a catch all route. They're helpful if you want different URLs for the same page layout or even when you're working with pages where some of the route parameters are optional.
+
+To navigate to other routes (pages), we wrap the heading for those pages in a Link (capital 'L') component and have the href point to the corresponding internal page via '/PAGE'
+
+Place Order Button: first, we add the button and give it a click handler. Next, we define the handler through a const. Within, the order body, we're assuming the order was placed successfully and log 'placing your order'. Then, the user should be programmatically navigated to the products page.
+
+To do this, at the top, we import useRouter from next/router.
+
+Within the component, we make const router = useRouter. Within this object, we can access the push method, passing in the route as the argument.
+
+In this example, we're navigating to /product. So, we import next/router and define a router const.
+
+We're currenly only trying to navigate back to the product argument, but we can navigate to nested routes, dynamic routes, and catch-all routes.
+
+If you want to replace the history instead of pushing the route onto the stack, you can use router.replace. The behavior is similar ot the link component with the prop set to True.
+
+Remember - you use the 'useRouter' hook's _router.push_ method to navigate programmatically
+
+*/