🍃 A manageable CSS framework for React with TailwindCSS
Tailwindcss separates concerns effectively between a css styling framework and javascript application code. Because of this you avoid components having too many props that affect their styling in favor of the vanilla classNames property controlling all the styles
May 26, 2020
🗿 Static Files in Next.js
When building a Next.js project you often might want to host some static files along side the application code. Next makes this easy with the `public/` directory.
Mar 15, 2020
📸 Image optimization with Next.js
Having large un-optimized images will slow down your site performance dramatically. There's a long list of optimizations that can be made to rendering images, and some useful libraries for handling this in a Next.js application.
Mar 14, 2020
💾 Next.js javascript heap out of memory
You might occasionally run into JavaScript heap out of memory errors while building Next.js projects, not to fear! It's typically a simple solution.
Mar 13, 2020
☑️ Defining an array of objects in Typescript
The most simple way to define an array of objects in typescript is by placing brackets after an interface, you can do this either by defining a named interface or inline.
Mar 12, 2020
📜 Building a blog with Next.js
Next.js is a great (I would argue the best) platform for building a simple (but custom) blog in 2020. New features like static site generation and preview mode make building a blazing fast blog super simple.
Mar 11, 2020
✏️ XState forms and validation
XState is a great solution for creating custom forms in a React based application that have strict validation and are stable against users hitting edge cases.
Mar 9, 2020
🗾 State Management in Next.js
Managing state in Next.js or any React based framework comes with it's challenges, but the route that gives the most power to boiler plate ratio is using Xstate to build state machines at both the local and global levels
Mar 8, 2020
💽 Fetching Data in Next.js
Next.js gives you a lot of flexibility in different ways to fetch data, but there are some best-practice patterns / methods. Recent additions from the Zeit / Next team like SWR, and upcoming build-time data fetching have also opened up a few more paths to getting data in your Next.js application.
Nov 30, 2019
🎩 Styling a Next.js Project
Next.js has a few built-in styling methods and many more are possible to integrate. We'll review the built in methods, how to integrate a custom method, and some ways to handle responsive styles.
Nov 26, 2019
🐇 How to set up a Next.js Project
We'll walk through the first steps that you should take with a new Next.js project, from installing the package to getting your dev server running, and some common companion things to set up such as linting.
Nov 22, 2019
🐣 Nested routes in Next.js
Defining routes in Next.js, including nested routes, is done primarily through the file structure in the pages directory.
Nov 20, 2019
⌨️ Using Google Fonts with next.js
The web has come a long way, but getting your font to show up on your site without flashing and not blocking rendering can be tricky. Google Fonts now supports font display swap which is a great way to make sure that your page loads and if for whatever reason the custom font doesn't load it falls back to a system or other local font.
Nov 18, 2019
🖇️ Get the Current URL in Next.js
There are a number of cases that need to be handed properly when getting the current URL in Next.js. Those being, server vs client and local vs prod. It's important to be able to get the current URL, especially if you are using API routes and need to get that api data into your page through getInitialProps.
Nov 14, 2019
❓ Get query params in Next.js
Getting query parameters in Next.js is very simple, but is done differently on the client and on the server.
Nov 13, 2019
💼 Next.js Content Management System (CMS)
We detail a general approach for connecting a Next.js application to a CMS,that makes use of the stale-while-revalidate cache setting for near instant updates. Many CMS have guides on how to integrate to Next.js using their client libraries. This can work well depending on the client library, we’ll show a more general approach using the CMS’s API here.
Nov 11, 2019
👽 A good gitignore for Next.js
There are a few common files that should be ignored for every Next.js project. We give a recommended configuration for working with git in Next.js projects
Nov 8, 2019
🤖 Next.js disable SSR
You sometimes might want to disable server side rendering in Next.js, to do so you should use the dynamic module in Next. We'll show you how to do it, and some best practices about when to / when not to use it.
Nov 2, 2019
🗃️ Using a database with Next.js
Next.js does not have a built in database, but there are simple ways to get databases connected to Next.js through connectors. We'll show some best practices for how to connect a database to Next.js in this article.
Nov 1, 2019