A lightweight, type-safe utility library for @fioc/core, optimized for Next.js Server Components and Server Actions, enabling seamless dependency injection in modern React applications.
@fioc/next is a lightweight utility library for @fioc/core and @fioc/react, tailored for Next.js applications. It provides a type-safe bridge between client components and server-side dependencies, integrating seamlessly with React Server Components and Server Actions for clean architecture. For stricter type safety, see @fioc/strict.
Install using npm, pnpm, or yarn (requires @fioc/core):
npm install @fioc/core @fioc/next
pnpm install @fioc/core @fioc/next
yarn add @fioc/core @fioc/next
Set up a server-side dependency container using @fioc/core or @fioc/strict:
// app/server/container.ts
import { buildDIContainer } from "@fioc/core";
import {
UserRepository,
UserRepositoryToken,
} from "./repositories/userRepository";
import {
CreateUserUseCase,
CreateUserUseCaseToken,
} from "./useCases/createUser";
const serverContainer = buildDIContainer()
.register(UserRepositoryToken, new UserRepository())
.registerFactory({
token: CreateUserUseCaseToken,
dependencies: [UserRepositoryToken], // Must match factory parameters
factory: (repo) => new CreateUserUseCase(repo),
})
.getResult();
Create a Server Action to handle dependency resolution:
// app/server/actions.ts
"use server";
import { buildIoCServerHandler } from "@fioc/next";
import { serverContainer } from "./container";
export const iocServerHandler = buildIoCServerHandler(serverContainer);
Set up a client-side container for Next.js client components:
// app/client/container.ts
import { buildDIContainer, buildDIManager } from "@fioc/core";
import { IoCServerHandlerToken, createServerControllerProxy } from "@fioc/next";
import { CreateUserUseCaseToken } from "../server/useCases/createUser";
import { iocServerHandler } from "../server/actions";
const clientContainer = buildDIContainer()
.register(IoCServerHandlerToken, iocServerHandler)
.registerFactory(createServerControllerProxy(CreateUserUseCaseToken))
.getResult();
export const DIManager = buildDIManager()
.registerContainer(clientContainer, "default")
.getResult()
.setDefaultContainer("default");
Wrap your Next.js app with @fioc/react’s provider:
// app/layout.tsx
import { DependenciesProvider } from "@fioc/react";
import { DIManager } from "./client/container";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html>
<body>
<DependenciesProvider manager={DIManager}>
{children}
</DependenciesProvider>
</body>
</html>
);
}
Use dependencies in client components with the useDependencies hook:
// app/components/CreateUser.tsx
"use client";
import { useDependencies } from "@fioc/react";
import { CreateUserUseCaseToken } from "../server/useCases/createUser";
export function CreateUserForm() {
const { resolve } = useDependencies();
const createUser = resolve(CreateUserUseCaseToken);
const handleSubmit = async (formData: FormData) => {
try {
await createUser({
name: formData.get("name") as string,
email: formData.get("email") as string,
});
} catch (err) {
console.error(err);
}
};
return <form action={handleSubmit}>...</form>;
}
@fioc/strict for enhanced type safety in server containersContributions are welcome! Feel free to open issues or submit pull requests on GitHub.
MIT License - see the LICENSE file for details.
FAQs
A lightweight, type-safe utility library for @fioc/core, optimized for Next.js Server Components and Server Actions, enabling seamless dependency injection in modern React applications.
We found that @fioc/next demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer 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.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.