Today we are introducing the new Next.js Commerce Starter App for Broadleaf Microservices. This will be a quick introduction to what it is, the core technologies, the advantages of using Next.js, and who to contact to get started with it.
Why we adopted Next.js
First, what is Next.js? Next.js is a React Framework that provides abstractions for handling:
- Code bundling and compiling
- Server-side and static rendering
- Production-build code optimizations
These enhance performance, search engine optimizations, and developer quality of life. Let's go over the benefits of each of these.
Benefits of a code bundler
A bundler lets us break our code down and compartmentalize it. We can create a single component in its own file, like a button, then reuse that in multiple other files. At the end of the day, the bundler then takes all the disparate component files and modules we’ve built and combines them to load in the browser or the node server.
This is a big deal for developers’ quality of life and code maintainability. We don’t have to write huge JS files and worry about whether our code will be picked up or if a function name or property will collide elsewhere once it’s loaded in the browser. It also is the solution to even being able to load JS in JS when not in the browser (i.e., when server-side) and maintaining consistent scoping of variables and functions.
Next.js uses Webpack for bundling. On top of the other benefits, Webpack also lets us bundle CSS and assets, like fonts.
Note: ECMAScript does now have a built-in module import/export system but it’s not fully supported across browsers. That’s why we still need 3rd party bundlers like Webpack, which also provide other benefits like CSS and asset bundling.
Benefits of a JavaScript compiler
A JavaScript compiler lets us write code using TypeScript, JSX, and the latest ECMAScript standard without needing to think too much about browser compatibility. It will convert the code we write into plain, backward-compatible JavaScript. This greatly enhances developer's abilities to write modern and clean code while also taking advantage of IDEs' for type-checking and code completions.
The compiler of choice for Next.js is Babel.
TypeScript
Of particular interest for the latter points is TypeScript. TypeScript is a superset of JavaScript that introduces features of a strongly-typed language like Java where we can define the types of variables, inputs, and outputs. This is a development tool and informs the IDE of the types intended, and it also provides compile-time checks to help catch any mistakes before we deploy our code. Note, however, that this does not add any runtime checks, only compile-time ones.
Here's an example of defining a type or interface with TypeScript.
And here's an example of the auto-completion suggestion in VS Code:
JSX
Another benefit of the compiler is that it allows us to write in JSX. JSX is a syntax extension for JavaScript that lets us write JS like it's HTML, but, under-the-hood, everything is still a JS object. A significant advantage with this is not just the convenience of the more familiar HTML-ish syntax, but it combines that with the power of JS for custom logic.
Here's an example without JSX:
And here's the same with JSX:
ECMAScript
ECMAScript is the JavaScript specification. Older browsers will use an older version, while newer browsers can be inconsistent with what and how they implement the newer specs. Babel will transform the syntax to be compatible with the lowest-common denominator and add polyfills for missing features in older browsers. This let's us use the latest and greatest while developing without needing to think too much about browser compatibility, as far as JS goes.
Benefits of Server-Side and Static Rendering
Server-side and static rendering mean that pages are pre-rendered into HTML on the server instead of being rendered only in the browser after it has executed our JavaScript. This makes the content accessible to the web crawlers used by search engines without having to wait on that JS, which not all crawlers are "smart" enough to do. Static rendering can also improve time-to-first-byte (TTFB) by rendering content at build time rather than per-request.
Next.js makes this quite easy to enable just by implementing and exporting an async function called either `getServerSideProps` for server-side rendering or `getStaticProps` for static rendering.
Getting Started
Contact info@broadleafcommerce.com for information on how to obtain the latest version of the starter project and repository credentials. You can also start reviewing our documentation on the different components involved in our Microservices offering, including the backend.
