Next.js version 12.1.4 or higher is required.
Explore documentation
Better Stack Next.js client
Start logging in 3 steps
1. Install
Install Logtail Next.js NPM package:
Install Logtail Next.js
npm install @logtail/next
2. Setup
Set LOGTAIL_SOURCE_TOKEN
environment variable:
Set environment variable
export LOGTAIL_SOURCE_TOKEN="$SOURCE_TOKEN"
Set up Better Stack Next.js client in next.config.js
:
Wrap Next.js config with Logtail
const { withLogtail } = require('@logtail/next');
module.exports = withLogtail({
// Your existing config
});
Import Better Stack Next.js logger:
Import Logtail logger
const { log } = require('@logtail/next');
3. Start logging ๐
Use structured logging in client, edge, or server-side files:
Send logs to Logtail
log.error("Something bad happened.");
log.info("Log message with structured logging.", {
item: "Orange Soda",
price: 100.00
});
You should see your logs in Better Stack โ Live tail.
Need help?
Please let us know at hello@betterstack.com.
We're happy to help! ๐
Advanced usage
Handlers
Get logger with automatic log flushing and built-in exception logging.
Wrap your Next.js route handlers with Better Stack:
Logging in handlers
const { withLogtail, LogtailAPIRequest } = require('@logtail/next');
async function handler(req: LogtailAPIRequest, res: NextApiResponse) {
req.log.info("Hello Logtail!");
res.status(200).text("OK");
}
export default withLogtail(handler);
Log levels
Better Stack Next.js client provides four log levels: debug
, info
, warn
, and error
.
Stop sending debug
logs to Better Stack:
Don't send debug logs
export LOGTAIL_LOG_LEVEL=info
Server-side props
Take advantage of automatic log flushing and built-in exception logging.
Wrap your server-side props with Better Stack:
Server-side props
const { withLogtailGetServerSideProps } = require('@logtail/next');
export const getServerSideProps = withLogtailGetServerSideProps(
async ({ req, log }) => {
log.info("Hello Logtail!");
return {
props: {
},
}
}
);