Starting a new project can be both an exciting and exhausting experience. It's exciting because we get to start fresh, do better, and avoid past mistakes. It's exhausting because we have to make many technical decisions and choose the right tool for the job from an endless pool of npm packages, Github Repos, community projects and project boilerplates.
The fewer decisions about the technical architecture we have to make, the more we can focus on building features, delivering great products and iterating faster.
React by itself is not enough
If we want to create a website using React, we'll need more than just the React library to get a project up and running. So we have to tackle page routing, server-side rendering, static site and asset optimizations, bundling and so on.
Thankfully, others have walked this path before us, and we now have complete starting points for React-based websites and web apps.
React starters and decision fatigue
The official React docs mention three main React starter frameworks to create a new project. These 3 are Create React App, Next.js, and Gatsby.
Should we know three different React-based frameworks, each with various conventions, tooling and quirks? How would we decide what the right tool for the job is? Can't we use one as the go-to solution 99% of the time?
Yes. We can. Next.js, in its current state (version 12), can be the go-to solution for virtually any React-based website.
What is Next.js?
Next.js is a React framework with a robust software architecture built around React. It is designed in a somewhat opinionated way and comes with most of the technical decisions already baked into the architecture. As a result, many complex things work out of the box.
You are free to get under the hood and tweak things to a certain extent if you have to, but the dev experience and performance that comes with the initial configuration is so good, you'll prefer to avoid that.
We can say the same things about Create React App and Gatsby. While that's true, Create React App relies on many third party open source packages to make things work, and Gatsby is super focused on just one particular use case, static site generation. Sure, Gatsby has better support for static site generation at this moment, but we can achieve similar functionalities with Next.js.
What is Next.js used for?
With Next.js, we can create React websites and web apps. Next.js enables the possibility to:
- serve a single page react application, with code splitting and dynamic loading of additional content out of the box
- server render content
- build static sites with capabilities similar to Gatsby
- be the shell of a complex, custom front-end application like the TeleportHQ (more on that a bit later)
Thinking strategically Next.js
When weighing the risks of adopting new technology from a business perspective, we consider how widespread the technology is, who maintains it, its growth trajectory, and many more such aspects.
Next.js is in an excellent strategic position:
- It has healthy, active support from Vercel, which needs Next.js to grow its cloud business successfully.
- It has been around for enough years to reach a stability and maturity level that promotes rapid adoption and answers a vast set of everyday use cases and problems.
- It is actively maintained and evolved, pushing what is possible with web technologies with every new release.
- The dev experience is so great that a spinoff framework called Nuxt was made, which runs over Vuejs instead of React and caters to the same audience as Next.
Furthermore, its balance between rigid, opinionated architectural design and flexible extension points allows less experienced developers to create projects from scratch without risks to productivity and performance.
For the same reason, it is a great candidate for automation with low code / no-code tools. It's easier to automatically generate an entire site if the structure is imposed and supported by the framework running it.
Using Next.js
The Next.js documentation is excellent, and paraphrasing the dozens of pages of content in a summarised article would not do Next.js any justice. Instead, we'll briefly showcase how the project setup can be done and point to the right documentation pages.
The role of this section will be to showcase how Next.js works and focus our attention on what makes it shine. It is certainly not a step by step tutorial.
Project setup
Starting a new Next.js project is as straightforward as it can get. First, we have a create-next-app command that we can use to initialize everything. Typescript support is satisfactory and can be enabled at the project setup or later.
Routing and Pages
The routing system is one of the opinionated parts of Next.js. The folder structure dictates the supported URLs and page resolution when accessing those URLs. Pages are either in pages or src/page.
What is great about this feature is that it works when server-side rendering, when rendering static sites and also for client-side routing. We learn one API, one convention and use it for all use cases.
Even better, each page has its javascript bundle, so 1000 pages with different components and functionality will not make each page grow in size.
There's much power in the way pages work in Next.js. Each page is like an application entry point. Pages define what data dependencies they have and if they should be fetched at runtime on the server, on the client side, or if the data should be provided statically and the results generated a static HTML.
Styling and CSS
There's built-in support for basic CSS and CSS Modules.
Because Next.js uses webpack under the hood to bundle the application, any CSS framework that works with React can be added to Next.js projects. In addition, popular frameworks like Tailwind have guides about how to run them within Next.js codebases.
Since we're working with React components and bundling assets with traditional bundling toolchains, the developer experience for CSS is the same as it is in any other React codebase.
Performance
One of the critical differentiators of Next compared to other frameworks is how fast sites built with it run. Performance is achieved by offering an opinionated page bundling and routing and out-of-the-box optimizations per page, based on the functionalities used. For example, a page that never defines any server-side props will be treated differently than one that does.
Thanks to a collaboration with Google, the Next/Image component was born, which encodes the best standards for image optimization and lazy loading out of the box. This component is such a nice change of pace from duck tapping third-party components into the core of a project. While essential, image optimization is often overlooked by framework developers, and project developers have to rely on third-party solutions, which involve different decisions to be made, too many choices and complex options to pick from.
There's even the option to create a completely static site export that throws the server-side functionality out and generates only static content, which we can host on a CDN as HTML, CSS, and JS.
E-commerce
Online stores are one medium where performance, page loading speed and smooth browsing experience is critical. A decrease in load time of one second for an e-commerce landing page can have significant revenue increases.
We expect future Next.js releases to bring additional features to this medium and push the web forward in doing so. Their Next.js e-commerce open source project is noteworthy.
The future of web development with React
The performance will continue to improve, and the technology behind it will continue to grow more complex with every new step made.
Frameworks like Next.js will continue to grow and incorporate lots of these new capabilities under the hood. Developers will focus more on building actual product functionalities and not have to worry about the technical details of the complex architecture their code runs on.
As less and less complexity is exposed in the typical development lifecycle, automation becomes easier to envision and gains practical applications.
For example, abstracting away the complexities of building a page structure, providing a visual workflow for achieving such goals without writing code for the React Components that compose it, or blending custom code and visual editing will become great compliments to technologies like Next.js
TeleportHQ, a free low code platform with real time collaboration
TeleportHQ is a free low-code platform to streamline your development process and increase your productivity. It offers low-code capabilities with a visual user interface, reusable components, Figma import plugin, and clean code export to Next.js and 9 different Javascript frameworks.
Working in TeleportHQ, you will be able to quickly jump from design prototype to deployment-ready code for any project. Create static websites, web or mobile apps and export your code to any desired development framework.
