Setting up Pico.css with Next.js
Since this isn’t a CSS book, we don’t want to be bothered by designing too much, but everybody loves a clean UI. That’s why we will add Pico.css (https://picocss.com/) to our project now. It is a CSS file that will set default styles without the need to add CSS classes – everything gets useful default styles. On top of that, it also seamlessly supports dark and light themes out of the box.
The easiest way to install Pico.css is by using a public content delivery network (CDN). All you need to do is pop a <link>-
tag into your Next.js project’s root layout, app/layout.js
, like so:
<head> <link rel="stylesheet" href="https://cdn.js delivr.net/npm/@picocss/pico@1/css/pico.min.css" /> </head>
In that same file, in the <body>
tag...