Skip to content

This project contains different useful utilities I developed for myself while working on different NextJS projects.

License

Notifications You must be signed in to change notification settings

gpaslari/nextjs-utils

Repository files navigation

This is a Next.js project bootstrapped with create-next-app.

It contains different useful utilities I developed for myself while working on different NextJS projects:

Utilities

Server Memory

Problem: I need an application level cache with auto refresh. Built-in NextJS caching is request or page level.

Existing solutions: In 15 min didn't find anything nice and simple.

My Solution: "Server Memory" with expiry and auto-refresh. Does it in app RAM by default, can easily be extended to use file system, NoSQL DB or anything else you like as a memory provider ;)

Example

// remember() gets an async parameterless function as incoming param
const latestDate: Date = await remember(getLatestDate)

    // here you specify the hash name you can use later to invalidate it
    .as("LATEST_DATE")

    // for(...) gets an instance of MemoryDuration. There are helpers for most common time periods (e.g. minutes(), hours(), days())
    // and you can stack them as you need (e.g. days(5).and(hours(4)).and(minutes(5)))
    .for(seconds(5).and(milliseconds(50)))

Links

Storage State

Problem: I need a simple global and persisted state management functionality and don't want to go through complex redux configuration.

Existing solutions: Redux is too complicated, others... I don't know any other options TBH...

My Solution: "Storage State" - as simple as React useState hook. Gracefully shares the provided state among all components. Uses LocalStorage by default, can easily be extended to use other memory provider ;)

Example

// you don't even need this comment to understand how to use it, do you?
const {items, addItem, removeItem} = useStorageState<Record>("RECORDS")

Links

Running the app

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

About

This project contains different useful utilities I developed for myself while working on different NextJS projects.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •