SimpleNextjs.

Category : basics

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

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