Easy props sharing with nested components without drilling for Next.js +10 Next plugin

The main goal of this library is to avoid the prop drilling as simple as possible in a Next.js environment.

Features ✨

• 🚀 ・ Works well with automatic page optimization.
• 🦄 ・ Easy to use and configure.
• 🈂️ ・ It loads only the necessary data (for page).
• 📦 ・ Tiny (~1kb) and tree shakable. No dependencies.

How are props loaded?

In the configuration file, you specify each page that needs the props:

common-props.config.js

module.exports = function () {
    return {
	    '/index': [
		    {
			    key:  'mediaPosts',
			    data:  async () => ({test: 'some text'}),
		    },
		  ],
	   };
};

You can also, import any function to data key.

Next-translate ensures that each page only has its props. So if we have 100 common props, only required(or specified in config file) will be loaded.

In order to do this we use a webpack loader that loads the necessary translation files inside the Next.js methods (getStaticProps, getServerSideProps or getInitialProps). If you have one of these methods already on your page, the webpack loader will use your own method, but the defaults it will use are:

• getStaticProps. This is the default method used on most pages, unless it is a page specified in the next two points. This is for performance, so the calculations are done in build time instead of request time.
• getServerSideProps. This is the default method for dynamic pages like [slug].js or [...catchall].js. This is because for these pages it is necessary to define the getStaticPaths and there is no knowledge of how the props should be for each component. Likewise, how is it by default, only that you write the getStaticPaths then it will already use the getStaticProps to load the translations.
• getInitialProps. This is the default method for these pages that use a HoC. This is in order to avoid conflicts because HoC could overwrite a getInitialProps.

This whole process is transparent, so in your pages you can directly consume the useCommonProps hook to use the props, and you don't need to do anything else.

2. Getting started

Install

• yarn add next-common-props

Add next-common-props plugin

In your next.config.js file:

const nextCommonProps = require('next-common-props')

module.exports = nextCommonProps()

Or if you already have next.config.js file and want to keep the changes in it, pass the config object to the nextCommonProps(). For example for webpack you could do it like this:

const nextCommonProps = require('next-common-props')

module.exports = nextCommonProps({ webpack: (config, { isServer, webpack }) => { return config; } })

Add common-props.config.js config file

Add a configuration file common-props.config.js with module.exports) in the root of the project. Each page should have its prop key and data as function.

module.exports = function () {
	    return {
		    '/index': [
			    {
				    key:  'mediaPosts',
				    data:  async () => ({test: 'some text'}),
			    },
			  ],
		   };
	};

4. API

useCommonProps

Size: ~378b 📦

This hook is the recommended way to use props in your pages / components.

• Input: NA
• Output: Object<any, any>

Example:

import React from 'react'
import useCommonProps from 'next-common-props/useCommonProps'

export default function Description() {
  const { common } = useCommonProps()
  return (
    <>
      <h1>{common.mediaPosts.test}</h1>
    <>
  )
}

Where common.mediaPosts.test is accessed based on we will have to declare key as mediaPosts and data as a function which will return an object with key test.

Note: This only supports for functional components export. We will support class based component soon in page.

14. Demos

Basic demo

This demo for this repository:

• git clone [email protected]:developerKumar/next-common-props-example.git
• cd next-common-props-example
• yarn && yarn run dev

Demo URL