In this article, we analyse next-runtime-env usage in Documenso source code and what is next-runtime-env.
What is next-runtime-env?
Using next-runtime-env, you can effortlessly populate your environment at runtime, not just at build time. Read more about next-runtime-env.
next-runtime-env dynamically injects environment variables into your Next.js application at runtime. This approach adheres to the “build once, deploy many” principle, allowing the same build to be used across various environments without rebuilds.
Quick start
- Add
PublicEnvScriptin the root layout.tsx.
// app/layout.tsx
import { PublicEnvScript } from 'next-runtime-env';
export default function RootLayout({ children }) {
return (
<html lang="en">
<head>
<PublicEnvScript />
</head>
<body>
{children}
</body>
</html>
);
}
The PublicEnvScript component automatically exposes all environment variables prefixed with NEXT_PUBLIC_ to the browser
2. Access your environment variables.
// app/client-page.tsx
'use client';
import { env } from 'next-runtime-env';
export default function SomePage() {
const NEXT_PUBLIC_FOO = env('NEXT_PUBLIC_FOO');
return <main>NEXT_PUBLIC_FOO: {NEXT_PUBLIC_FOO}</main>;
}
next-runtime-env usage in Documenso
Based on the documentation, the first step was to add PublicEnvScript in the root layout. You will find this in app/layout.tsx.
<head>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
{IS_APP_WEB_I18N_ENABLED && <meta name="google" content="notranslate" />}
<PublicEnvScript />
</head>
And the next step was accesing env variables. One such example is found in put-file.ts
export const putFile = async (file: File) => {
const NEXT_PUBLIC_UPLOAD_TRANSPORT = env('NEXT_PUBLIC_UPLOAD_TRANSPORT');
return await match(NEXT_PUBLIC_UPLOAD_TRANSPORT)
.with('s3', async () => putFileInS3(file))
.otherwise(async () => putFileInDatabase(file));
};
Here env is used to access an environment variable called NEXT_PUBLIC_UPLOAD_TRANSPORT. This way, when you change your env variables, you don’t have to rebuild your Next.js application.
About me:
Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.
I am open to work on an interesting project. Send me an email at ramu.narasinga@gmail.com
My Github - https://github.com/ramu-narasinga
My website - https://ramunarasinga.com
My Youtube channel - https://www.youtube.com/@thinkthroo
Learning platform - https://thinkthroo.com
Codebase Architecture - https://app.thinkthroo.com/architecture
Best practices - https://app.thinkthroo.com/best-practices
Production-grade projects - https://app.thinkthroo.com/production-grade-projects
Top comments (2)
I have some doubts in documenso
can you please check this.
dev.to/agria_haneefa/unable-to-acc...
Hey, large Next.js application requires atleast 16GB RAM. Whats your server specs? If it’s 8GB, it is going to be slow. Faced this issue in a recent project, tried a 16G RAM GitHub codespace and the project worked.
I would check that first and also recommend opening an issue in Documenso repository.