- Home
- Basics
- Databases
- Libraries
- Firebase
- Others
SimpleNextjs.
PostgreSQL is the database of choice for robust, entreprise-grade and free relational databases, which makes it perfect for large web apps. We will see in this article how to seamlessly use PostgreSQL in our Next.js app.
More Articles
How to change port in your Next.js app
Next.js apps run locally by default on the port 3000. If you want to run two Next.js apps at once locally, or if this port is already taken (since it is often used ), you will need to run your app on a different port.
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.
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.
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.
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.
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..
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
How to fetch external data in Next.js
Static generation vs Server-side generation, or how to fetch external data in 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.
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.
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.
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.
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).
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.
