Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shahradelahi/next-extra
⚡ Enhance Next.js Beyond Limits
https://github.com/shahradelahi/next-extra
nextjs react typescript
Last synced: 4 days ago
JSON representation
⚡ Enhance Next.js Beyond Limits
- Host: GitHub
- URL: https://github.com/shahradelahi/next-extra
- Owner: shahradelahi
- License: mit
- Created: 2024-06-08T21:16:04.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-11T17:12:31.000Z (13 days ago)
- Last Synced: 2024-12-13T16:44:16.994Z (11 days ago)
- Topics: nextjs, react, typescript
- Language: TypeScript
- Homepage: https://npmjs.com/next-extra
- Size: 208 KB
- Stars: 409
- Watchers: 3
- Forks: 6
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
_next-extra_ is a utility package that allows you to enhance your Next.js projects with additional methods not found in the core package.
---
- [Installation](#-installation)
- [Usage](#-usage)
- [`next-extra/action`](#next-extraaction)
- [`next-extra/context`](#next-extracontext)
- [`next-extra/pathname`](#next-extrapathname)
- [Contributing](#-contributing)
- [License](#license)
## 📦 Installation
```bash
npm install next-extra
```
## 📖 Usage
### `next-extra/action`
###### API
```typescript
function createAction(fn: Function): ActionFunc;
function actionError(code: string, message: string): never;
function cookies(): ResponseCookies;
function clientIP(): Promise;
```
###### Example
```typescript jsx
// -- actions.ts
'use server';
import { actionError, createAction } from 'next-extra/action';
export const hello = createAction(async (name: string) => {
if (!name) {
actionError('NAME_REQUIRED', 'Name is required');
}
return `Hello, ${name}!`;
});
```
```typescript jsx
// -- page.tsx
import { hello } from './actions';
export default async function Page() {
const { data, error } = await hello('John');
if (error) {
return
ERROR: {error.message}
;
}
return {data}
;
}
```
### `next-extra/context`
This module provides utilities for passing serializable data from the **server layout** to **client page components** in the Next.js [App Router](https://nextjs.org/docs/app). It is particularly useful for sharing context-specific data across your application without the need to re-fetch data, thereby saving computing resources and improving performance.
###### API
```typescript
function PageContext(props: PageContextProps): JSX.Element;
function usePageContext(): Readonly;
function useServerInsertedContext(): Readonly;
```
###### Example
```typescript jsx
// -- layout.tsx
import { PageContext } from 'next-extra/context';
export default async function RootLayout({ children }: { children: React.ReactNode }) {
return {children};
}
```
```typescript jsx
// -- quotes/layout.tsx
import { PageContext } from 'next-extra/context';
export default async function Layout({ children }: { children: React.ReactNode }) {
return {children};
}
```
```typescript jsx
// -- quotes/page.tsx
'use client';
import { useServerInsertedContext, usePageContext } from 'next-extra/context';
interface Context {
message: string;
}
interface InsertedContext extends Context {
ts: number;
}
export default function Page() {
const insertedCtx = useServerInsertedContext();
console.log(insertedCtx); // undefined in server or Object { ts: ..., message: "..." }
const ctx = usePageContext();
console.log(ctx); // Object { message: "..." }
return
Message: {ctx.message}
;
}
```
### `next-extra/pathname`
Access `pathname` and `searchParams` of the incoming request for server-side components in the [App Router](https://nextjs.org/docs/app).
###### API
```typescript
function pathname(): Promise;
function searchParams(): Promise;
```
###### Example
```typescript
import { pathname, searchParams } from 'next-extra/pathname';
export default async function Layout({
children,
}: Readonly<{ children: React.ReactNode }>) {
// Assuming a request to "/hello?name=John"
const route = await pathname(); // /hello
const params = await searchParams(); // ReadonlyURLSearchParams { 'name' => 'John' }
return children;
}
```
## 🤝 Contributing
Want to contribute? Awesome! To show your support is to star the project, or to raise issues on [GitHub](https://github.com/shahradelahi/next-extra).
Thanks again for your support, it is much appreciated! 🙏
## Relevant
- [NextJs CSRF Protection](https://github.com/shahradelahi/next-csrf)
## License
[MIT](/LICENSE) © [Shahrad Elahi](https://github.com/shahradelahi)