Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 | import React, { useState, useEffect } from 'react'
export default function ServerSideExample(props) {
const [data, setData] = useState(null)
useEffect(() => {
fetch('api/envAPIExample')
.then((res) => res.json())
.then((data) => {
setData(data)
})
}, [])
return (
<>
<div role="main" className="container mx-auto px-6 my-5 p-12">
<h2 className="text-4xl font-bold">Server Side Example</h2>
<div className="py-4">
<h3 className="text-2xl">NEXT_PUBLIC_ENV_EXAMPLE</h3>
<p>
JSX:{' '}
<span className="text-orange-700">
{process.env.NEXT_PUBLIC_ENV_EXAMPLE
? process.env.NEXT_PUBLIC_ENV_EXAMPLE
: 'undefined'}
</span>
</p>
<p>
Props:{' '}
<span className="text-orange-700">
{props.nextPublicExampleEnv}
</span>
</p>
</div>
<div className="py-4">
<h3 className="text-2xl">ENV_EXAMPLE</h3>
<p>
JSX:{' '}
<span className="text-orange-700">
{process.env.ENV_EXAMPLE ? process.env.ENV_EXAMPLE : 'undefined'}
</span>
</p>
<p>
Props: <span className="text-orange-700">{props.exampleEnv}</span>
</p>
</div>
<div className="py-4">
<h3 className="text-2xl">API Example</h3>
<p>
Api:{' '}
<span className="text-orange-700">
{data ? data?.apiEnv : 'Loading'}
</span>
</p>
</div>
</div>
</>
)
}
export async function getServerSideProps({ locale }) {
const meta = {
data_en: {
title: 'Next Template - Canada.ca',
desc: 'English',
author: 'Service Canada',
keywords: '',
},
data_fr: {
title: 'Next Template - Canada.ca',
desc: 'Français',
author: 'Service Canada',
keywords: '',
},
}
return {
props: {
locale,
meta,
nextPublicExampleEnv:
process.env.NEXT_PUBLIC_ENV_EXAMPLE ?? 'Env variable not set',
exampleEnv: process.env.ENV_EXAMPLE ?? 'Env variable not set',
},
}
}
|