DEV Community

DwightColbyJack
DwightColbyJack

Posted on

My journey through NextJS

I recently graduated from the Flatiron School for Software Engineering. It was truly an experience in building on a foundation, namely Ruby, the beloved object-oriented programming language. At the end of the course, I found myself drawn to React, the Javascript-based library used to build-out interactive user interfaces. React is based on components comprised of Javascript logic, in self-contained "building-blocks" that are easy to compose and reuse as needed. React's true utility is templating data and efficiently rendering those templates to the DOM. From a visual learner's stand-point, being able to see a '' component and a '' component in the editor brought the big picture into focus without a ton of code obscuring the greater vision for an application.
In exploring where to go after graduation, I found out about NextJS through a tutorial offered by Wes Bos, a popular programming blogger, educator and developer. While my blog will follow my journey through this course, I want to emphasize the greater technical take-aways from what I learn rather than give a "review" of the program. So to start off, NextJS is a framework that acts like a wrapper for React components, offering greater capabilities like routing, pages, static or server rendering and image handling. Enter pages; the "pages" directory offered by the framework offers easier composition of applications and produces the literal pages of a website using file-system-based routing. Add a page to the directory and immediately get that route created as well. As a light comparison I'd like to show-off the logic used to set routes in a React project I did for Flatiron called Lookin' Sharp. Here's a look
React routing pic
All wrapped together are a Switch component, the Router component from React Router and then the individual components to be routed...somewhere in there. Not to mention the React container holding onto this big chunk of code, it's beginning to look like a needle in a haystack scenario figuring out how to get from page to page. Now here's a peek at what it takes to route with NextJS:
NextJS routing
Boom, we define them in the pages directory and we can already navigate to those pages and their content. Index, the sell page, the signin page all routed for you upon creation! I'm loving the advantages of NextJS and honestly can't wait to start building more applications with it!

Top comments (0)