npmpackage.info

Gathering detailed insights and metrics for @gasket/nextjs

Other packages similar to @gasket/nextjs

@gasket/plugin-nextjs

7.6.0

Adds Next support to your application

@gasket/preset-nextjs

7.5.0

Basic NextJS Framework

Gathering detailed insights and metrics for @gasket/nextjs

@gasket/nextjs - 7.6.0 | npmpackage.info

@gasket/nextjs

Framework Maker for JavaScript Applications

7.6.0

138

MIT

JavaScript

41.08 kB

5.2

Installations

npm install @gasket/nextjs

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

22.16.0

NPM Version

10.9.2 Pull Requests

Open

4

Total

1,104

Closed

186

Merged

914

Issues

Open

25

Total

52

Closed

27

Releases

438

@gasket/plugin-git@7.4.3

Updated on Jul 03, 2025

@gasket/plugin-data@7.4.5

Updated on Jul 03, 2025

@gasket/preset-nextjs@7.4.9

Updated on Jul 03, 2025

@gasket/preset-api@7.4.6

Updated on Jul 03, 2025

@gasket/plugin-docs@7.4.4

Updated on Jul 03, 2025

@gasket/react-intl@7.5.4

Updated on Jul 03, 2025

View All 438 releases

Languages

JavaScript

TypeScript

CSS

HTML

JavaScript (95.29%)

TypeScript (3.24%)

CSS (1.3%)

HTML (0.18%)

Developer

godaddy

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

138 Stars

1,585 Commits

77 Forks

17 Watchers

36 Branches

78 Contributors

Updated on Jul 10, 2025

Maintainers

View All 78 Contributors

Package Meta Information

Latest Version

7.6.0

Package Id

@gasket/nextjs@7.6.0

Unpacked Size

41.08 kB

Size

10.57 kB

File Count

NPM Version

10.9.2

Node Version

22.16.0

Published on

Jul 10, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

@gasket/nextjs

Gasket integrations for Next.js apps. Provides several tools:

request: Access a request-like object in server components
withGasketData: Injects Gasket Data added during lifecycle into Document
withGasketDataProvider: Provides context access to Gasket Data
useGasketData: Allows access to Gasket Data from hook

Installation

npm i @gasket/nextjs

Functions

request

Get a normalized GasketRequest unique to the current request in server components. This uses the Next.js cookies() and headers() dynamic functions.

Signature

await request(params?: object): GasketRequest

Props

[query] - (object) Optional query object

Many GasketActions are designed to be unique to requests. When using ServerComponents with Next.js, the incoming request object is not fully accessible. This function provides a way to get a normalized request-like object that can be used with GasketActions from ServerComponents.

Example

1import { request } from '@gasket/nextjs/request';
2import gasket from '../gasket.mjs'
3
4export default async function MyPage(props) {
5  const req = await request();
6  const something = await gasket.actions.getSomething(req);
7  
8  return <div>{ something.fancy }</div>;
9}

The req will be a GasketRequest with headers and cookies.

If a query object is passed in, it will be added to the request object as well. For server components, dynamic routes params are available via props, and can be passed to the request function to make those path params available as the query.

1import { request } from '@gasket/nextjs/request';
2import gasket from '../gasket.mjs'
3
4export default async function MyDynamicRoutePage({ params }) {
5  const req = request(params);
6  const something = await gasket.actions.getSomething(req);
7  
8  return <div>{ something.fancy }</div>;
9}

Components

withGasketData

Use this to extend your Next.js Document to automatically inject a script containing the gasketData for use with the @gasket/data package.

Signature

withGasketData(options)(Document)

Props

[options] - (object) Optional configuration
- index - (number) Force the script to be inject at a certain child index of the body

Example

This is the simplest and most common setup:

1// pages/_document.js
2import Document from 'next/document';
3import { withGasketData } from '@gasket/nextjs/document';
4import gasket from '../gasket.js';
5
6export default withGasketData(gasket)(Document);

By default this will inject the script in the <body/> after the Next.js <Main/> component, but before <NextScript/>. This also works for a custom Document.

Example forced index

However, there may be situations where you want to inject the gasketData script at a particular child index of the <body/>. To do so, you can set the index in the decorator options.

1// pages/_document.js
2import Document, {Html, Head, Main, NextScript} from 'next/document'
3import { withGasketData } from '@gasket/nextjs/document';
4import gasket from '../gasket.js';
5
6class MyDocument extends Document {
7    static async getInitialProps(ctx) {
8        const initialProps = await Document.getInitialProps(ctx)
9        return {...initialProps}
10    }
11
12    render() {
13        return (
14            <Html>
15                <Head/>
16                <body>
17                <Main/>
18                <footer>Some custom content</footer>
19                <NextScript/>
20                </body>
21            </Html>
22        )
23    }
24}
25
26export default withGasketData(gasket, {index: 2})(MyDocument);

In this example, the gasketData script will be injected after the custom <footer/> instead of right after <Main/>.

This is especially useful if you are somehow nesting or extending the <Main/> and <NextScript/> components and the decorator cannot find the right place to inject the script.

withGasketDataProvider

Use this to allow gasket data to be accessed with the useGasketData hook. This is SSR and client side friendly and can be added at the app level or component level.

Example

1// pages/_app.js
2import { AppProps } from 'next/app';
3import { withGasketDataProvider } from '@gasket/nextjs';
4import gasket from '../gasket.js';
5
6
7const Root = ({ Page, pageProps }) => {
8  return (
9    <Page {...pageProps} />
10  );
11};
12
13export default withGasketDataProvider(gasket)(Root);

useGasketData

Use this hook to access the gasketData provided by the withGasketDataProvider hoc.

Example

1// MyComponent.js
2import { useGasketData } from '@gasket/nextjs';
3
4
5export const MyComponent = (props) => {
6  const gasketData = useGasketData();
7
8  return (
9    <>
10      <div>{gasketData.something}</div>
11      <div>{gasketData.here}</div>
12    </>
13  );
14};

How it works

During server side rendering, lifecycles' data can be added to the gasketData property. When the withGasketData hoc is added to a custom Next.js _document, the gasketData is added to the rendered html inside a script tag.

The withGasketDataProvider can be added to a Next.js custom _app or react component. This HOC will capture the gasket data from server side gasketData property or the script tag that was rendered to the html. If Next.js is preforming a SSR the data will come from the gasketData property, otherwise the data will come from the script tag. The withGasketDataProvider hoc will then create a provider and inject gasket data into a context that can be consumed by the useGasketData hook.

The useGasketData will provide access to the gasket data within the context of the withGasketDataProvider, allowing data to be used within any react component.

Please see @gasket/data docs for examples on adding data during SSR lifecycle

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Maintained

Determines if the project is "actively maintained".

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

9

Security-Policy

Determines if the project has published a security policy.

8

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/ci.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/ci.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:32: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:38: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/ci.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs-deploy.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/docs-deploy.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/docs-deploy.yml:33: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/docs-deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs-deploy.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/docs-deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs-deploy.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/docs-deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs-deploy.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/docs-deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs-deploy.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/docs-deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs-deploy.yml:69: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/docs-deploy.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/syncpack.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/syncpack.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/syncpack.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/syncpack.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/syncpack.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/syncpack.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/syncpack.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/godaddy/gasket/syncpack.yml/main?enable=pin
Info: 0 out of 15 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 5 third-party GitHubAction dependencies pinned

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

5.2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to @gasket/nextjs

Other packages similar to @gasket/nextjs

@gasket/nextjs

Installations

Developer Guide

Yes

ESM

22.16.0

10.9.2

Pull Requests

4

1,104

186

914

Issues

25

52

27

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

@gasket/nextjs

Installation

Functions

request

Example

Components

withGasketData

Example

Example forced index

withGasketDataProvider

Example

useGasketData

Example

How it works

License

10

10

10

10

9

8

0

0

0

0

0

0

5.2

/10