Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xinyao27/next-devtools
Enhancement Next Developer Experience
https://github.com/xinyao27/next-devtools
Last synced: 6 days ago
JSON representation
Enhancement Next Developer Experience
- Host: GitHub
- URL: https://github.com/xinyao27/next-devtools
- Owner: xinyao27
- License: mit
- Created: 2023-11-12T07:48:50.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-13T03:26:06.000Z (14 days ago)
- Last Synced: 2024-12-16T11:08:56.711Z (10 days ago)
- Language: TypeScript
- Homepage: https://next-devtools.vercel.app
- Size: 2.7 MB
- Stars: 231
- Watchers: 4
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# Next Devtools
[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
Enhance Next developer experience
📚 Documentation
⚡️ Try it on StackBlitz
## Getting Started
Using Next DevTools in your Next project.
## Examples
You can refer to these two projects to use Next DevTools.
- [app-router](./examples/app-router/)
- [pages-router](./examples/pages-router/)
You can create a Next.js project using Next DevTools with the following.
```bash
# app-router
npx create-next-app@latest nextjs-devtools-app-router --use-npm --example "https://github.com/xinyao27/next-devtools/tree/main/examples/app-router"
# pages-router
npx create-next-app@latest nextjs-devtools-pages-router --use-npm --example "https://github.com/xinyao27/next-devtools/tree/main/examples/pages-router"
```
### Installation
Inside your Next project directory, run the following:
```bash
npm i @next-devtools/core
// or
pnpm add @next-devtools/core
```
### `next.config`
You need to add the following configuration in the `next.config` file.
```js
const { withNextDevtools } = require('@next-devtools/core/plugin')
module.exports = withNextDevtools({
// Other Next.js configuration ...
})
```
### `NextDevtoolsProvider`
#### `app router`
You need to add the `NextDevtoolsProvider` component in the `app/layout` file.
```tsx
import { NextDevtoolsProvider } from '@next-devtools/core'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
#### `pages router`
You need to add the `NextDevtoolsProvider` component in the `pages/_app` file.
```tsx
import { NextDevtoolsProvider } from '@next-devtools/core'
export default function App({ Component, pageProps }) {
return (
)
}
```
## Inspired by NuxtDevtools
[Nuxt DevTools](https://github.com/nuxt/devtools) is a set of visual tools that help you to know your app better.
## Contribution Guide
Please refer to the [Contribution Guide](https://next-devtools.vercel.app/guide/contributing).
## License
[MIT](./LICENSE)
[npm-version-src]: https://img.shields.io/npm/v/@next-devtools/core/latest.svg?style=flat&colorA=111111&colorB=ffffff
[npm-version-href]: https://npmjs.com/package/@next-devtools/core
[npm-downloads-src]: https://img.shields.io/npm/dt/@next-devtools/core.svg?style=flat&colorA=111111&colorB=ffffff
[npm-downloads-href]: https://npmjs.com/package/@next-devtools/core
[license-src]: https://img.shields.io/npm/l/@next-devtools/core.svg?style=flat&colorA=111111&colorB=ffffff
[license-href]: https://npmjs.com/package/@next-devtools/core