Enhance Next developer experience
Using Next DevTools in your Next project.
You can refer to these two projects to use Next DevTools.
You can create a Next.js project using Next DevTools with the following.
# 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"Inside your Next project directory, run the following:
npm i @next-devtools/core
// or
pnpm add @next-devtools/coreYou need to add the following configuration in the next.config file.
const { withNextDevtools } = require('@next-devtools/core/plugin')
module.exports = withNextDevtools({
// Other Next.js configuration ...
})You need to add the NextDevtoolsProvider component in the app/layout file.
import { NextDevtoolsProvider } from '@next-devtools/core'
export default function RootLayout({ children }) {
return (
<html>
<body>
<NextDevtoolsProvider>
{children}
</NextDevtoolsProvider>
</body>
</html>
)
}You need to add the NextDevtoolsProvider component in the pages/_app file.
import { NextDevtoolsProvider } from '@next-devtools/core'
export default function App({ Component, pageProps }) {
return <NextDevtoolsProvider><Component {...pageProps} /></NextDevtoolsProvider>
}Please refer to the Contribution Guide.