SimpleNextjs.

Cover Image for useContext React hook : How to use React context in Next.js

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.

Marouane Reda
Marouane Reda

More Articles

Cover Image for How to create a responsive horizontal navbar with ant design ( for Next.js and react apps)

How to create a responsive horizontal navbar with ant design ( for Next.js and react apps)

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.

Marouane Reda
Marouane Reda
Cover Image for How to use Font Awesome 5 with Next.js

How to use Font Awesome 5 with Next.js

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.

Marouane Reda
Marouane Reda
Cover Image for Add authentication to your Next.js app with NextAuth.js

Add authentication to your Next.js app with NextAuth.js

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.

Marouane Reda
Marouane Reda
Cover Image for Nextjs + Firebase : How to use firestore database in Next.js apps

Nextjs + Firebase : How to use firestore database in Next.js apps

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..

Marouane Reda
Marouane Reda
Cover Image for How to implement a search functionnality in a Next.js app

How to implement a search functionnality in 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.

Marouane Reda
Marouane Reda
Cover Image for How to use MySQL database in Next.js apps

How to use MySQL database in Next.js apps

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.

Marouane Reda
Marouane Reda
Cover Image for The comprehensive guide to react-quill (for React and Next.js)

The comprehensive guide to react-quill (for React and Next.js)

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.

Marouane Reda
Marouane Reda
Cover Image for How to use Bootstrap 5 with Next.js

How to use Bootstrap 5 with Next.js

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.

Marouane Reda
Marouane Reda
Cover Image for How to use styled components in Next.js apps

How to use styled components in Next.js apps

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!

Marouane Reda
Marouane Reda
Cover Image for How to implement dynamic routing in Next.js

How to implement dynamic routing in Next.js

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.

Marouane Reda
Marouane Reda
Cover Image for How to use Mongodb in your Next.js project

How to use Mongodb in your Next.js project

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.

Marouane Reda
Marouane Reda
Cover Image for Use Quill as a rich text editor in next.js

Use Quill as a rich text editor in next.js

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.

Marouane Reda
Marouane Reda
Cover Image for How to customize Ant design theme for Next.js

How to customize Ant design theme for Next.js

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.

Marouane Reda
Marouane Reda
Cover Image for The simple guide to debug Next.js apps in VSCode

The simple guide to debug Next.js apps in VSCode

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.

Marouane Reda
Marouane Reda
Cover Image for How to add Google Analytics to your Next.js project

How to add Google Analytics to your Next.js project

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.

Marouane Reda
Marouane Reda
Cover Image for How to create AMP pages with Next.js

How to create AMP pages with Next.js

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.

Marouane Reda
Marouane Reda
Cover Image for How to use antdesign with Next.js

How to use antdesign with Next.js

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.

Marouane Reda
Marouane Reda
Cover Image for How to create a REST API with Next.js

How to create a REST API with Next.js

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.

Marouane Reda
Marouane Reda
Cover Image for How to use Chakra-UI, Choc-UI and Chakra templates with Next.js

How to use Chakra-UI, Choc-UI and Chakra templates with Next.js

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.

Marouane Reda
Marouane Reda
Cover Image for How to fetch external data in Next.js

How to fetch external data in Next.js

Static generation vs Server-side generation, or how to fetch external data in Next.js.

Marouane Reda
Marouane Reda
Cover Image for How to use Firebase authentification with Next.js

How to use Firebase authentification with 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.

Marouane Reda
Marouane Reda
Cover Image for Deploy your Next.js app on Heroku with ease

Deploy your Next.js app on Heroku with ease

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.

Marouane Reda
Marouane Reda
Cover Image for Navigation in Next.js with the Link component

Navigation in Next.js with the Link component

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.

Marouane Reda
Marouane Reda
Cover Image for How to optimize SEO with Next.js

How to optimize SEO with Next.js

SEO (Search Engine Optimization) is one of the main selling points of Next.js, in comparison to vanilla React.

Marouane Reda
Marouane Reda
Cover Image for Simple data fetching with SWR in Next.js

Simple data fetching with SWR in Next.js

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).

Marouane Reda
Marouane Reda
Cover Image for How to optimize your Next.js app build

How to optimize your Next.js app build

In phase with its philosophy, Next.js has built-in support of many optimization features , some of which we will see in this article.

Marouane Reda
Marouane Reda