Check these not-so-secret tips and tricks that will optimize your development process when working with Next.js

Use these cool tips and tricks to step up your Next.js development
Use these cool tips and tricks to step up your Next.js development
Photo by Andreas Wagner on Unsplash

With the latest release of Next.js, a bundle of new features were put out in the wild for developers to take advantage. Most of these new items will greatly increase your team’s productivity, your application performance, as well as your ability to measure your code’s overall speed and points to optimize.

Let’s review a few of these features while, at the same time, let’s throw in a few others items that were released in previous versions which can greatly improve your Next.js development experience.

1. Next.js will automatically bootstrap TypeScript config files during the first run. One of the tedious…


Create a simple Next.js App that connects to HealthCare.gov API optimizing the experience with Redis Cache

Photo by Luca Campioni on Unsplash

For most websites, the changing pieces don’t actually vary that often. That immutability makes them first-rate candidates to be cached to avoid the roundtrip to fetch the content from either a database, web service or third party end-points.

Consider a blog article that you wrote. It will be rather unlikely that this article will change over time more than once or twice, for instance, to adjust outdated information or to add a correction suggested by a reader. However, in a regular scenario, every time a visitor hits that blog page, your database will also get a hit. If your page…


Avoid keeping your users in a passive state by actively engaging their interests.

The perception of time varies and can be overestimated by extended resting phases.
The perception of time varies and can be overestimated by extended resting phases.
Photo by Elisa Michelet on Unsplash

During a talk at CSS Dev Conf, Eli Fitch argued how people tend to perceive time in different ways and that, in essence, humans manage to overestimate waiting times, especially at rest, up to 36%. What does this mean?

In a nutshell, when a user hits that “Buy now” button each second that passes feels like three seconds for the average user. Psychologically the human brain has a hard time with patience and delaying gratification which, of course, maximizes any intrusion of friction and pain points. This, consequently, increases the stress levels for your customers.

While it pays off to…


Often you’ll see Mocks and Stubs called interchangeably, however they are different, and sometimes not used correctly

Learn the difference between a Mock and a Stub when testing
Learn the difference between a Mock and a Stub when testing
Photo by Raghav Bhasin on Unsplash

Test-Driven Development relies heavily upon properly defining business cases where the requirements are translated to Test Units which derivate in short development cycles that promote the code to pass the tests one by one.

This philosophy of development presents itself as a challenge for many developers who are used to a more rapid-like development process in which the achievement of discernible goals takes precedence over a well-thought software architecture (as opposed to the measure twice cut once so to speak).

In that vein, it’s important to grasp the key concepts of a test-centered development. Two definitions that often get confused…


Delegation, Observer, and Interceptor design patterns have been around for years. Unsurprisingly, they made their way into the TypeScript-sphere

TypeScript allows developers to implement many of the good ole design patterns, such as Delegate, Observer, and Interceptor.
TypeScript allows developers to implement many of the good ole design patterns, such as Delegate, Observer, and Interceptor.
Photo by Ryan Quintal on Unsplash

Software Design Patterns have been around for a long time, arguably, since the 1960s they emerged as formalized, structured programming practices that allow a faster and more efficient solution by implementing proven and reusable coding paradigms.

If you are interested, you can read “Design Patterns: Elements of Reusable Object-Oriented Software (Addison-Wesley Professional Computing Series)”. This 1994 book set a standard for defining what a design pattern is, its application and also introduced several design patterns still in use today; certainly the ones talked about in this article were discussed in Design Patterns book.

TypeScript is fairly recent, having been created…


Generic Types are a powerful TypeScript tool often misused due to them being so different from what a developer coming from traditional JavaScript is used to

Learn TypeScript’s Generic Types and their usages
Learn TypeScript’s Generic Types and their usages
Photo by Iza Gawrych on Unsplash

In TypeScript, Generic Types enable us to define a placeholder type for a variable we do not know enough yet to precise its type. Consider the following snippet:

const sayMessage = (message: string): string => `Simon says ${message}`;

The previous function will work quite well if we are sure that the argument send, when sayMessage is called, will always be a string. However, there might be situations that could prevent that to happen. For example, the message argument is coming from a third party, say a service, database, input field, etc. …


It might have happened to you in the past, not quite understanding which you should use

Element vs. HTMLElement vs. ReactElement: when should I use each?
Element vs. HTMLElement vs. ReactElement: when should I use each?
Photo by Amit Lahav on Unsplash

One of TypeScript’s great features is the level of specificity you can achieve when typing variables. You can define an array to be a collection of strings, or numbers, or a mix of them, but you can also establish that an element is either an HTMLInputElement or an HTMLSelectElement. However, the ease to designate the granularity of your variable types can lead to much confusion when you are starting out.

One of the fields where I have seen programmers being more inconsistent is when typing HTML elements, especially while working with React. …


Have you ever revisit a moment in your day when you could have done something amazing, only to say ‘I wish I had the guts to do it’

Conquer your fears and shine, you won’t regret it.
Conquer your fears and shine, you won’t regret it.
Photo by Lital Levy on Unsplash

When Mr. Harold Crick, a very uptight and conventional IRS agent finds himself falling in love with Miss Pascal, he keeps struggling to show her, using his own words, that “I want you”.

Ana Pascal, who is an upbeat and cheery baker, can’t quite figure it out, she is just waiting for Mr. Crick to show his true self, to break out of the mold… Maybe there is something there, but she doesn’t know, because he never had the chance, or rather, never decided to take the risk to liberate his true persona.

At this point, I should say that…


Whenever we forget about what the user really NEEDS and WANTS we could end up going down a rabbit hole of unnecessary decisions that affect our final product.

Consider the User first, then the Product
Consider the User first, then the Product
Photo by Kelly Sikkema on Unsplash

When Paul Lewis, a lead developer for Google, was benchmarking some of the most popular, recently released, web frameworks and libraries he noticed that many of these were actually slowing down the user-experience, sometimes exponentially. At this point, he wondered why developers tend to install and use whatever just came out last week, without analyzing the metrics of these frameworks.

He then realized, after some interactions with many developers on Twitter, that these developers went “library or framework happy”, and picked up whatever was released that week because, in many cases according to his poll, it was trendy or fun.


Simple step by step of how to create a basic GraphQL end-point with TypeScript and Apollo Server with SQLite as a database

Photo by David Torres on Unsplash

I’ve created another article on GraphQL with Python 🐍 if you want to check it out, click here.

TypeScript and GraphQL are a match made in heaven. They just are. In this article, I’ll try to show you why by creating a simple GraphQL application end-point using Apollo Server and SQLite as a database, however, you can extrapolate the knowledge and use it for any other organized collection of data, and the reason why that can happen is that we will also implement Object-Relational Mapping, with TypeORM.

Pablo A. Del Valle H.

Technical Project Manager at SweetRush

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store