https://github.com/ryanhefner/next-proper

⛓ Easily compile NextJS props via composed methods for getServerSideProps and getStaticProps.
https://github.com/ryanhefner/next-proper

getserversideprops getstaticprops nextjs react

Last synced: about 1 month ago
JSON representation

⛓ Easily compile NextJS props via composed methods for getServerSideProps and getStaticProps.

• Host: GitHub
• URL: https://github.com/ryanhefner/next-proper
• Owner: ryanhefner
• License: mit
• Created: 2021-01-27T17:05:30.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-03-15T19:55:01.000Z (over 3 years ago)
• Last Synced: 2024-04-25T22:42:52.377Z (7 months ago)
• Topics: getserversideprops, getstaticprops, nextjs, react
• Language: JavaScript
• Homepage: https://www.pkgstats.com/pkg:next-proper
• Size: 2.47 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# ⛓ next-proper

[![npm](https://img.shields.io/npm/v/next-proper?style=flat-square)](https://www.pkgstats.com/pkg:next-proper)

[![NPM](https://img.shields.io/npm/l/next-proper?style=flat-square)](LICENSE)

[![npm](https://img.shields.io/npm/dt/next-proper?style=flat-square)](https://www.pkgstats.com/pkg:next-proper)

Easily compile NextJS props via composed methods for `getServerSideProps` and `getStaticProps`.

## Install

Via [npm](https://npmjs.com/package/next-proper)

```

npm install --save next-proper

```

Via [Yarn](https://yarn.fyi/next-proper)

```

yarn add next-proper

```

## How to use

The goal of this package is to make it easy to compose NextJS props logic for either `getServerSideProps` or `getStaticProps`, so that you don’t have to copy that same code through all your pages.

Depending on your needs, or your apps logic, as you compose your prop methods, you can internally either exit early with `{ notFound: true }` or `{ redirect: ... }`, or continue the chain by calling, `next({ props: {...} })`;

Here’s a basic example using some simplified auth logic:

_`props/getAuthProps.js`_

```

export const getAuthProps = async (props, next, ctx) => {

  ...Do auth stuff...

  const user = getUser(...)

  if (!user) {

    return {

      redirect: {

        destination: '/login',

        permanent: false,

      }

    }

  }

  return next({

    ...props,

    props: {

      ...props.props,

      user,

    }

  })

}

```

_`pages/secure-page.js`_

```

import nextProps from 'next-proper'

import { getAuthProps } from 'props/getAuthProps'

import { getFetchPageProps } from 'props/getServerSideFetchPageProps'

export const getServerSideProps = nextProps([

  getAuthProps,

  getFetchPageProps,

])

```

## License

[MIT](LICENSE) © [Ryan Hefner](https://www.ryanhefner.com)