We can create server-side rendered React apps and static sites easily Next.js.
In this article, we’ll take a look at how to expose environment variables to the browser and routing.
Exposing Environment Variables to the Browser
We can expose our environment variable to the browser if we prefix our variable with the NEXT_PUBLIC_ prefix.
For example, we can write:
NEXT_PUBLIC_API_KEY=...
Then we can use it by writing:
function Photos({ data }) {
return <p>{JSON.stringify(data)}</p>
}
export async function getServerSideProps() {
const headers = new Headers();
headers.append('Authorization', process.env.NEXT_PUBLIC_API_KEY);
const res = await fetch(`https://api.pexels.com/v1/search?query=people`, {
method: 'GET',
headers,
mode: 'cors',
cache: 'default',
})
const data = await res.json()
return { props: { data } }
}
export default Photos
We access the environment variable from the process.env property.
Default Environment Variables
We can add default environment variables in the .env , .env.development , and .env.production files.
The .env.local file will override the values from those files.
And the .env*.local files should be added to .gitignore since this is where we should store secrets.
Environment Variables on Vercel
We can also store environment variables on Vercel’s environment variables section.
We still use .env , .env.development and .env.production to store default values.
The values can be pulled into .env.local by running:
vercel env pull .env.local
Test Environment Variables
Also, we can use the test environment to store environment variables for any test environment.
This is useful for setting up environments for running automated tests.
The test values will be used if the NODE_ENV is set to test .
.env.local won’t be loaded when the app is running in the test environment.
Supported Browsers and Features
Next.js supports IE11 and all modern browsers like Chrome, Firefox, and Edge.
Next.js injects polyfills for IE11 compatibility.
Therefore, we don’t have to worry about missing features on IE11.
Server-side polyfills are also injected.
This way, we can use fetch in the server-side environment without adding our own polyfills.
Next.js makes sure that modern JavaScript features like:
- Async/await (ES2017)
- Object Rest/Spread Properties (ES2018)
- Dynamic import() (ES2020)
- Optional Chaining (ES2020)
- Nullish Coalescing (ES2020)
- Class Fields and Static Properties
all work out of the box.
Routing
Routing is done automatically with Next.js
The folder structure of the pages folder determines the routes that are defined.
For example, if we have page/index.js is mapped to / .
And pages/posts/index.js is mapped to /posts .
We can just nested our files and they’ll be mapped to URLs with the path of the files.
Dynamic Route Segments
We surround our filename with brackets to make them dynamic.
For example, if we have pages/blog/[slug].js , then it’s mapped to the /blog/:slug URL.
If we have pages/post/[…all].js , then we can have any number of URL parameters after /post .
For example, it’ll match /post/2020/id/title .
Linking Between Pages
We can add links between pages with the Link component.
For example, we can write:
pages/links.js
import Link from 'next/link'
function Links() {
return (
<ul>
<li>
<Link href="/foo">
<a>foo</a>
</Link>
</li>
<li>
<Link href="/bar">
<a>bar</a>
</Link>
</li>
</ul>
)
}
export default Links
pages/foo.js
import Links from './links';
function Foo() {
return <div>
<Links />
<p>foo</p>
</div>
}
export default Foo
pages/bar.js
import Links from './links';
function Bar() {
return <div>
<Links />
<p>bar</p>
</div>
}
export default Bar
to add the Links component with the Link components to add the links to the pages.
And we use Links in the Foo and Bar components to add the routes.
Now we can click on them to jump between routes.
Conclusion
We can use environment variables in the browser environment with Next.js.
Also, we can add links to our pages with the Link component.
Routing is done by following some conventions.
