Debloated Markdown Blog with Zola
A manageable CSS framework for React with TailwindCSS
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.
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.
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.
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.
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.
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
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.
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.
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.
Nested routes in Next.js
Defining routes in Next.js, including nested routes, is done primarily through the file structure in the pages directory.
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.
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.
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.
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.
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
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.