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.
- Environment-aware logging (Server, Browser, Edge)
- Customizable log levels
- Colored console output for server environments
- Full TypeScript support
- Lightweight and easy to use
- Zero external dependencies
- No side effects
- Distributed as TypeScript files for maximum flexibility
npm install nexlog
# or
yarn add nexlog
# or
bun add nexlogTo use nexlog with Next.js, follow these steps:
-
Install nexlog as shown above.
-
Configure Next.js to transpile nexlog. In your
next.config.jsornext.config.mjs:
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ["nexlog"],
};
export default nextConfig;- Use the LoggerProvider in your root layout (e.g., in
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>
);
}- In your components, use the
useLoggerhook:
'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(): LogLevellogger.enable()logger.disable()logger.isEnabled(): booleanlogger.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 installTo run tests:
npm test
# or
yarn test
# or
bun testWhile 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:
- You've wrapped your application with the
LoggerProviderin your root layout. - You're using 'use client' directive in the file where you're using
useLogger. - You've properly configured Next.js to transpile nexlog.
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.