news app next.js portEXe

Uses news api (entirely free api), has pagination. Pulls data from databae on github.

Mentioned the next.js pattern of having styles folder to contain all css module files. He followed this but said he usually does the folder approach so they are close by.

12m- Actually starts building after next.js overview. Creates eom comp. Says the only differemce between page comps and standard react functional component is that you have to make sure it is a default export.  Talks about ssr being great for bots and facebook to render these preview pages.

Uses myjsonserver api that he set up for us. Fetches to this url from inside GSSP. Pretty cool he has this wired to his github repo through an api server that is going to find a db.json file on his git repo that contains an employye of the month. In db.json he just has an object in there. Allows you to have a mock databae ewihtout having to set up a databse.

Convert fetch to json

Notes that a console log in your main comp function logs to the browser and to the terminal console, meaning his js is running both server side and client side. Once on the server and twice on the browser, isomporphic js.

Shows how the data fetched from api in GSsP is inthe page source.

23m css for eom comp

25m setup homepage inc css

27m toolbar component (nav) inside comps folder. Since it is not a page compoennt he doesnt need to do export default Toolbar. Uses useRouter from next/router. Const router = useRouter().  Added onClick function to each div that represented link and had incline function that used router.push and directed to route. For the twitter link he uses window.location.href = ‘hisTwiiterUrl’ to send to outside url.

31m bring toolbar into page comps.

33m explains dyanimc parameters

35m starts pagination using GSSP that takes in pageContext and sets const pageNumber equal to pageContext.query.slug (note he named his dynamic route slug). Simple if statement to conditionally return props of articles as empty array and pageNumber one if page number doesnt exist or less than on or greater than five. If it makes it past this if check then he fecthes from news api and has dynamic porting of url for {pageNumber}. Send config object for fetch request since in headers he needs to send Aurhotization key that has his api key.

Mentions that since this is in GSsp no one will see his key but dont want to commit to source code so uses envirnoment variable by adding.env to git ignore and using dotenv package. Create var in .env file. He didnt install dotenv so it may be installed with next automatically.

returns props after fecth request is retunred and convertved to json

43m in main comp [slug].js render the actually news articles with a map function.

46m add function via onclick to article heading so it can link to news source url

48m paginator buttons using ternary. On click with logic.

Scroll to top by adding after router.push().then() that takes a function with window.scrollTo(0, 0), (may not be needed because next said they were going to fix in future update)

51m style paginator invluding active and disabled classes

55m deploy to vercel