Next Course Build and Feploy Premium Next JS React website by JavaScript Mastery. Other than using theme-ui, I really loved this tutorial.
Used StartupLanding template since they offer amazing next.js templates
Zip for project in google drive linked in video description. Maybe worth downloading if, for nothing else, the list of dependencies, lots here including dotenv, framer motion, glob by, isomorphic unfetch. React multi carousel.
He has all styles written so we can focus on logic, layout
Clickable video iframe, pricing section, testimonial slider, etc.
Also used the src folder strategy. Took it a step further by having jsconfig.json to change base url to avoid long paths ../../../
Had assets folder in src folder. Had header and footer folders in comp folder.
Used theme-ui which implements constraint-based design principles. Uses sx syntax.
Had getInitialProps in _document.js
Globally imported some CSS files into app.js carousel, modal-video
Cool that he built, out all the components will simple h2 so you saw a list of headings on the page and he just worked his way down.
Next config to install plugins (optimize images)
Liked how he had the nav links in a separate file header.data.js
Used react-scroll to scroll to specify parts of the website
Pass different className sticky to header comp in layout comp
24m MobileDrawer comp for mobile nav. rc-drawer package. Drawer slides in from left.
35m react-custom-scrollbars
38m admitted mobile navs are tough
39m started banner section. Brought in svgs via css? Nice and responsive. Text and svg grow larger. Added image of screenshot.
44m key feature section
Section header component with isWhite props. These techniques are what make React and Next so popular.
51m – key feature section: Map over data to render featured card column comp and we pass fitle image alt-text and text.
58m services section: video iframe with pulsing play button.
Used onClick with handleClick function. Uses a box component a lot.
Uses this description && () to make components modular. Do something different if prop not received. Helps prevent white space.
70m: Make modal appear to play video. React-modal-video package. Only 17k weekly downloads. Give channel prop youtube and video prop id from youtube.
75m Features Section: map over data item to show featured card.
79m Core Feature Section:
Workflow Section:
90m Pricing section
95m: implement react-multi-carousel package in package section
114m team section. Custom teamCard comp in grid comp. teamCard has image, heading, text and social.
120m testimonial card: testimonial comp that has sectionHeader comp in container comp. Also has a caraousel with a rating comp, heading, text, client image. rating comp with for loop that if rating pushes star icons else pushes empty stars.
135m Deploy: added && next export to build script to create “out” folder. Static Sites. Hosted on hostinger at jsmastery.net. Drag and drop all files and folders. Also showed
130m Footer: Footer has a folder in comps folder and has footer.data.js with all the links and footer.js comp. has html footer tag container, link with image of footer logo. Also has nav that maps through links and displays links. Copyright notice.
Overall theme I noticed in course: No SSG or GSSP really just JSX in place of html with some functions rigged with onClick and some map with hard-coded data arrays. Leveraged a lot of packages even with very low weekly downloads, (he said this is not because it is a bad package it is just not that difficult to write yourself)
The Container tag is used a lot, is this native, imported, or custom comp?