# next-app-trpc

> A Node.js package for seamless integration of tRPC into existing Next.js projects. It simplifies setting up tRPC clients/servers, managing API routes, and ensuring compatibility with import aliases.

Latest version **1.0.4** (published 2024-01-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install next-app-trpc
pnpm add next-app-trpc
yarn add next-app-trpc
bun add next-app-trpc
```

Provides the command `next-app-trpc`.

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2024-01-17 |
| First published | 2024-01-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 25.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jefferson Abraham Omier |
| Maintainers | tsnc |
| Keywords | nextjs, trpc, react-query, decimal.js, superjson, boilerplate |

## Links

- npm: https://www.npmjs.com/package/next-app-trpc
- Repository: https://github.com/TheSteelNinjaCode/next-app-trpc
- Homepage: https://github.com/TheSteelNinjaCode/next-app-trpc#readme
- Issues: https://github.com/TheSteelNinjaCode/next-app-trpc/issues
- npm.io page: https://npm.io/package/next-app-trpc

## Dependencies (3)

- [chalk](https://npm.io/package/chalk.md) ^5.3.0
- [prompts](https://npm.io/package/prompts.md) ^2.4.2
- [ts-morph](https://npm.io/package/ts-morph.md) ^21.0.1

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.4 (latest) — 2024-01-17
- 1.0.3 — 2024-01-17
- 1.0.2 — 2024-01-17
- 1.0.1 — 2024-01-17
- 1.0.0 — 2024-01-17

## README

# next-app-trpc

This is `next-app-trpc`, a Node.js package designed to seamlessly integrate tRPC into existing Next.js projects. It offers a straightforward approach to implementing tRPC, ensuring compatibility with source code using import aliases or custom import aliases, all while being written in TypeScript.

## Description

`next-app-trpc` simplifies the integration of tRPC (TypeScript RPC) into Next.js applications. It's designed to offer a streamlined approach for developers looking to leverage tRPC's capabilities in their existing Next.js projects. The package addresses common challenges such as setting up tRPC clients and servers, managing API routes, and maintaining source code compatibility, especially when using import aliases or custom import aliases.

## Installation

This package is designed for use with `npx`, eliminating the need for global installation. Simply run the command below to use `next-app-trpc`:

```bash
npx next-app-trpc
```

## Dependency Installation

When you run `next-app-trpc`, the following dependencies are automatically installed, ensuring a seamless setup and integration:

- `@trpc/client`: For client-side tRPC communication.
- `@trpc/server`: For creating and managing the tRPC server.
- `@trpc/react-query`: To integrate tRPC with React Query.
- `@tanstack/react-query`: For fetching, caching, and updating data in React apps.
- `decimal.js`: Provides arbitrary-precision decimal arithmetic, useful for precise calculations.
- `superjson`: Extends JSON to support more data types, enhancing data transmission in tRPC applications.

## Project Structure

The typical project structure when using `next-app-trpc` in a Next.js application looks like this:

```bash
Next.js
.
├── src
│   ├── app
│   │   ├── _trpc
│   │   │   ├── client.ts  # tRPC client
│   │   │   └── TrpcProvider.tsx  # tRPC provider
│   │   │   └── serverClient.ts  # <-- tRPC server client
│   │   ├── api
│   │   │   └── trpc
│   │   │       └── [trpc]
│   │   │           └── route.ts  # tRPC HTTP handler
│   ├── server
│   │   ├── routers
│   │   │   ├── user.ts  # Sub routers
│   │   │   ├── post.ts  # Sub routers
│   │   ├── index.ts  # Main router
│   │   └── trpc.ts  # Procedure helpers
└── [...]
```

## Example

To demonstrate how you can use `next-app-trpc`, here's a basic example:

```bash
"use client";

import { trpc } from "./_trpc/client";

export default function Home() {
  const greeting = trpc.greeting.useQuery();
  return <h1>{greeting.data ?? "No data"}</h1>;
}
```

## Documentation and Resources

For comprehensive guides and best practices, refer to the official documentation of each tool and library integrated with `next-app-trpc`:

- Next.js Documentation: [Next.js Official Docs](https://nextjs.org/docs/getting-started)
- tRPC Documentation: [tRPC Official Docs](https://trpc.io/)
- React Query Documentation: [React Query Official Docs](https://react-query.tanstack.com/)
- Superjson Documentation: [Superjson Official Docs](https://www.npmjs.com/package/superjson)
- Decimal.js Documentation: [Decimal.js Official Docs](https://mikemcl.github.io/decimal.js/)

## For video tutorials, check out

- [How to use next-app-trpc](https://youtu.be/6c08XXgafbk)

## Contributing

Contributions to `next-app-trpc` are welcome. If you have any suggestions, bug reports, or pull requests, feel free to open an issue or submit a pull request on the repository.

## License

This project is licensed under the MIT License - see the LICENSE file for details.

---
_Source: https://npm.io/package/next-app-trpc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._