Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@blitzjs/next
Advanced tools
[![Blitz.js](https://raw.githubusercontent.com/blitz-js/art/master/github-cover-photo.png)](https://blitzjs.com)
The @blitzjs/next
adapter exposes functions & components specific for
the Next.js framework.
You can install @blitzjs/next
by running the following command:
npm i @blitzjs/next # yarn add @blitzjs/next # pnpm add @blitzjs/next
Blitz.js extends the next.config.js
file by accepting a blitz
property.
blitz?: {
resolverPath?: ResolverPathOptions;
customServer?: {
hotReload?: boolean;
};
};
For more information on setting a custom `resolverPath`, read more at
the [RPC Specification](/docs/rpc-specification#url)
Inside src/blitz-client.ts
:
import {setupBlitzClient} from "@blitzjs/next"
export const {withBlitz} = setupBlitzClient({
plugins: [],
})
Then inside src/pages/_app.tsx
wrap MyApp
function with the
withBlitz
HOC component.
import {ErrorFallbackProps, ErrorComponent, ErrorBoundary} from "@blitzjs/next"
import {AuthenticationError, AuthorizationError} from "blitz"
import type {AppProps} from "next/app"
import React, {Suspense} from "react"
import {withBlitz} from "src/blitz-client"
function RootErrorFallback({error}: ErrorFallbackProps) {
if (error instanceof AuthenticationError) {
return <div>Error: You are not authenticated</div>
} else if (error instanceof AuthorizationError) {
return (
<ErrorComponent
statusCode={error.statusCode}
title="Sorry, you are not authorized to access this"
/>
)
} else {
return (
<ErrorComponent
statusCode={(error as any)?.statusCode || 400}
title={error.message || error.name}
/>
)
}
}
function MyApp({Component, pageProps}: AppProps) {
return (
<ErrorBoundary FallbackComponent={RootErrorFallback}>
<Component {...pageProps} />
</ErrorBoundary>
)
}
export default withBlitz(MyApp)
An `` provider and `` component is
supplied by `@blitzjs/next`
setupBlitzClient({
plugins: [],
})
plugins:
An array of Blitz.js plugins
An object with the withBlitz
HOC wrapper
Inside src/blitz-server.ts
import {setupBlitzServer} from "@blitzjs/next"
export const {gSSP, gSP, api} = setupBlitzServer({
plugins: [],
})
setupBlitzServer({
plugins: [],
onError?: (err) => void
})
plugins:
An array of Blitz.js plugins
onError:
Catch all errors (Great for services like sentry)An object with the gSSP
,
gSP
& api
wrappers.
The Blitz CLI supports running custom Next.js servers. This means you can
compile both javascript & typescript while using the Blitz.js CLI to
inject env variables. By default, the CLI checks for
src/server/index.[ts | js]
or src/server.[ts | js]
For more information about custom Next.js servers, check the
official docs
All Next.js wrapper functions are serialized with
superjson
. That means you can
use Date
, Map
, Set
& BigInt
when returning data. Another thing to
note is that Blitz runs the middlewares from plugins before calling the
Next.js request handler.
import {gSP} from "src/blitz-server"
export const getStaticProps = gSP(async ({ctx}) => {
return {
props: {
data: {
userId: ctx?.session.userId,
session: {
id: ctx?.session.userId,
publicData: ctx?.session.$publicData,
},
},
},
}
})
import {gSSP} from "src/blitz-server"
export const getServerSideProps = gSSP(async ({ctx}) => {
return {
props: {
userId: ctx?.session.userId,
publicData: ctx?.session.$publicData,
},
}
})
import {api} from "src/blitz-server"
export default api(async (req, res, ctx) => {
res.status(200).json({userId: ctx?.session.userId})
})
For more information about Next.js API routes, visit their docs at https://nextjs.org/docs/api-routes/introduction
You may want to check if the user is logged in before your page loads.
We’re going to use the getCurrentUser
query inside
getServerSideProps()
by calling the query directly. Then you can check
if the user is logged in on the server and use the built-in Next.js
redirect property.
import {Routes, BlitzPage} from "@blitzjs/next"
import {gSSP} from "src/blitz-server"
import getCurrentUser from "src/users/queries/getCurrentUser"
export const getServerSideProps = gSSP(async ({ctx}) => {
const currentUser = await getCurrentUser(null, ctx)
if (currentUser) {
return {
props: {
user: currentUser,
},
}
} else {
return {
redirect: {
destination: Routes.LoginPage(),
permanent: false,
},
}
}
})
You can set the types returned from the Next.js data fetching functions.
All Blitz.js wrappers for the Next.js functions accept a generic. Same
with the BlitzPage
type.
So for example, we can use some typescript utilities to help use get the
types returned by getCurrentUser()
import {Routes, BlitzPage} from "@blitzjs/next"
import {gSSP} from "src/blitz-server"
import getCurrentUser from "src/users/queries/getCurrentUser"
type TCurrentUser = Awaited<ReturnType<typeof getCurrentUser>>
export const getServerSideProps = gSSP<{user: TCurrentUser}>(async ({ctx}) => {
const currentUser = await getCurrentUser(null, ctx)
if (currentUser) {
return {
props: {
user: currentUser,
},
}
} else {
return {
redirect: {
destination: Routes.LoginPage(),
permanent: false,
},
}
}
})
const Page: BlitzPage<{user: TCurrentUser}> = ({user}) => {
return (
<Layout title="Page">
<div className="container">
<p>User Page</p>
{user && <p>{user.email}</p>}
</div>
</Layout>
)
}
export default Page
There’s an edge case where you may be throwing an error in a query that’s
being called on an initial page load, causing a server error instead of
hitting the <ErrorBoundary />
. This is because when initially loading
the page, there is no ErrorBoundary component rendered until _app.tsx
is
mounted. Though, this is expected behaviour, there is a workaround.
For an example, in a query where the user is not found you can create a
NotFoundError()
then return the status code.
export default resolver.pipe(resolver.zod(GetUser), async (input) => {
const {id} = input
const user = await db.user.findFirst({where: {id}})
if (!user) {
const userError = new NotFoundError("User not found")
return {
error: userError.statusCode,
}
} else {
return {
user,
}
}
})
Then on the server (in this case getServerSideProps()
) you can call the
query and if the error key is found in the return object then show an
error.
export const getServerSideProps = gSSP(async ({ ctx }) => {
const user = await getUser({ 1 }, ctx)
if("error" in user) {
return { props: { error: user.error}}
} else {
return { props: { user }}
}
})
You can also catch server errors in _app.tsx
and show the errors with a
toast component.
function MyApp({Component, pageProps}: AppProps) {
const getLayout = Component.getLayout || ((page) => page)
if (pageProps.error) {
return <ToastComponent>{pageProps.error.statusCode}</ToastComponent>
}
return (
<ErrorBoundary FallbackComponent={RootErrorFallback}>
{getLayout(<Component {...pageProps} />)}
</ErrorBoundary>
)
}
FAQs
[![Blitz.js](https://raw.githubusercontent.com/blitz-js/art/master/github-cover-photo.png)](https://blitzjs.com)
The npm package @blitzjs/next receives a total of 2,026 weekly downloads. As such, @blitzjs/next popularity was classified as popular.
We found that @blitzjs/next demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.