A simple and effective logging library for Next.js, compatible with server, browser, and edge environments.
MIT License
nexlog is a simple, effective, and zero-dependency logging library for Next.js, compatible with server, browser, and edge environments. It's distributed as TypeScript files for maximum flexibility and type safety.
npm install nexlog
# or
yarn add nexlog
# or
bun add nexlog
To use nexlog with Next.js, follow these steps:
Install nexlog as shown above.
Configure Next.js to transpile nexlog. In your next.config.js
or next.config.mjs
:
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ["nexlog"],
};
export default nextConfig;
app/layout.tsx
):import { LoggerProvider } from 'nexlog/react';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<LoggerProvider>
{children}
</LoggerProvider>
</body>
</html>
);
}
useLogger
hook:'use client';
import { useLogger } from 'nexlog/react';
export default function MyComponent() {
const logger = useLogger();
logger.info('MyComponent rendered');
return <div>My Component</div>;
}
import logger from 'nexlog';
// Log messages
logger.info('This is an info message');
logger.warn('This is a warning', { additionalInfo: 'Some extra data' });
logger.error('An error occurred', { errorCode: 500 });
Note: The default export is an instance of the ConfigurableLogger class, pre-configured for the detected environment.
Server environment:
[INFO] This is an info message
[WARN] This is a warning {"additionalInfo":"Some extra data"}
[ERROR] An error occurred {"errorCode":500}
Browser/Edge environment:
[INFO] This is an info message
[WARN] This is a warning {"additionalInfo":"Some extra data"}
[ERROR] An error occurred {"errorCode":500}
logger.trace(msg: string, meta?: object)
logger.debug(msg: string, meta?: object)
logger.info(msg: string, meta?: object)
logger.warn(msg: string, meta?: object)
logger.error(msg: string, meta?: object)
logger.fatal(msg: string, meta?: object)
logger.setLevel(level: LogLevel)
logger.getLevel(): LogLevel
logger.enable()
logger.disable()
logger.isEnabled(): boolean
logger.setSSROnly(ssrOnly: boolean)
type LogLevel = "trace" | "debug" | "info" | "warn" | "error" | "fatal";
You can configure the logger using the following methods:
// Set the log level
logger.setLevel('debug');
// Enable or disable logging
logger.enable();
logger.disable();
// Set SSR-only mode
logger.setSSROnly(true);
nexlog automatically detects the current environment (server, browser, or edge) and adjusts its output accordingly. You can also use helper functions for detection:
import { isServer, isNextEdgeRuntime } from 'nexlog';
if (isServer) {
console.log('Running on server');
} else if (isNextEdgeRuntime) {
console.log('Running on edge runtime');
} else {
console.log('Running in browser');
}
To install dependencies:
npm install
# or
yarn install
# or
bun install
To run tests:
npm test
# or
yarn test
# or
bun test
While I'm currently the sole developer of this project, I'm open to contributions. If you have suggestions or want to contribute, please feel free to open an issue or submit a pull request.
This project is licensed under the MIT License.
If you find nexlog helpful, consider sponsoring me. Your support helps me maintain and improve this project.
No, nexlog is designed to be completely self-contained with zero external dependencies.
No, nexlog is carefully designed to avoid any side effects. It doesn't modify global objects or interfere with other parts of your application.
Distributing nexlog as TypeScript files provides maximum flexibility for users. It allows for better tree-shaking, gives users full type information, and lets them compile the library according to their project's specific needs.
The useLogger
hook is a React hook, and hooks can only be used in client components. Adding 'use client' at the beginning of the file tells Next.js that this component should be rendered on the client side.
nexlog is distributed as TypeScript files to provide maximum flexibility and type safety. However, Next.js doesn't automatically transpile dependencies. By adding nexlog to the transpilePackages
array in your Next.js configuration, you ensure that the TypeScript files are properly compiled for use in your Next.js application.
This error typically occurs when Next.js is trying to parse the TypeScript files directly. To resolve this, make sure you've properly configured Next.js to transpile nexlog as described in the "Configuration with Next.js" section above.
If you're encountering issues with the useLogger
hook, ensure that:
LoggerProvider
in your root layout.useLogger
.If you're still having issues, please open an issue on the GitHub repository with details about your setup and the specific error you're encountering.