Starting from React v16.3.0 , it is possible to use a new feature named context to pass data throughout the app. This approach can replace the tedious top-down passing of data through props and in some measure can also be used instead of Redux. Let’s see how we can use context in Next.js.
While ant design component library offers one of the most extensive choices of react components, one of its glaring shortcomings is the lack of a mobile responsive top menu. We will see in this article how to adress this using the Menu and Drawer component.
Font Awesome is one of the most popular icon libraries for web apps. This tutorial will show you how tu use it in our Next.js app.
Implementing authentication in an app from the ground app is a sensitive and tedious process, luckily several new ways emerged to make this task easier (Firebase authentication, Auth0, passport.js, …) . We will see in this article how to implement authentication in our Next.js app using NextAuth.js.
After Implementing Firebase authentication in Next.js app, we will continue our series of Nextjs and Firebase by implementing firestore access, data fetching and data insert from a Next.js app..
Implementing a search functionality in a Next.js app should take into account the structure of our app, the nature of its data, … But if you need a general idea of how it could be done, this article shows how it was implemented in the current site you are on right now.
Mysql is certainly one of the most popular databases for web apps, and web apps built with Next.js are no exception in that regard. We will see in this article how to seamlessly use MySQL in our Next.js app.
Quill is an open source, very modular WYSIWYG rich text editor for web apps, that comes with many useful features. React-quill is a Quill component for use with React and React-based frameworks ( like Next.js). In this article, we will go in details to explore all the possibilities offered by react-quill to our React and Next.js apps.
Along with ant design and chakra-ui, Bootstrap is the most widely used componenet library that you can use to speed up the developpement of your next.js app, giving it a nice professional feel.
While Next.js comes with styled-jsx as a built-in styling solution, you may be wishing to use styled-components to style your app. In this article we will see how to use styled components in an example Next.js app without hassle!
While routing in React applications is generally done by React-router, Next.js comes with built-in, directory-based routing system. We will dive in this post in how static and dynamic routing is achieved in Next.js.
If you need to integrate a database to your Next.js app, MongoDB is a great choice to consider ( especially if you prefer a NOSQL database for your app). Fortunately, setting up MongoDB with Next.js is pretty straightforward.
If you need to integrate a rich text editor in you next.js app, multiple options available, from building it from the ground up using draft.js to the simplistic option like react-simple-wysiwyg . One of the better options, which offers flexibility, simplicity to use and rich features is certainly Quill.
antd is one of the most used library components for React apps. By using less, it can be customized to suit your design needs. But customizing it for Next.js apps is not straightforward, this is why we made this tutorial.
Debugging your code is important if your app is showing an unwanted behaviour or errors. We will see in this article how to debug a Next.js app in VSCode, one pf the most popular IDEs.
Google Analytics is a great way to monitor the activity of visitors on your Next.js site. Adding Google Analytics to your Next.js site is pretty simple, as will be shown.
AMP (Accelerated mobile pages) are becoming increasingly important for SEO ( especially for Google). With Next.js, you can create AMP pages in an easy way.
Like chakra-ui, ant design is a componenet library that you can use to speed up the developpement of your next.js app, giving it a nice professional feel.
You can easily create a REST API for your Next.js app by using the built-in API routes. This article will show an example of how this API can be created.
The use of component libraries for React such as Ant Design for React, react-Bootstrap, … has become more widely used not only for prototyping purposes ( as it speeds up development), but also for production-ready applications. With Chakra UI , Choc UI and Chakra Templates, you can take this approach even further.
Static generation vs Server-side generation, or how to fetch external data in Next.js.
Authentification is one of the most used features of any web app, that developers had for years to implement by themselves. Luckily in the last years many services offer a simpler implementation of authentification (oAuth, passport.js, supabase, …) , and firebase is certainly on of the most used and most simple to implement.
While Next.js apps are usually delayed on Vercel, you can prefer to deploy your app on Heroku. This tutorial will show you how to do this easily and fast.
Your Next.js app have multiple pages, but how would you navigate from one page to another? You can obviously use <a> tag, but you will lose all the perks of client-side rendering as that would make a request to the server and would cause the browser to refresh for the new content.
SEO (Search Engine Optimization) is one of the main selling points of Next.js, in comparison to vanilla React.
SWR is a React hook for data fetching that is lightweight, fast and easy to use. More importantly it is perfect fot Next.js as it supports both Static Generation (SSG) and Server-side Rendering (SSR).
In phase with its philosophy, Next.js has built-in support of many optimization features , some of which we will see in this article.