Made withStrapiClip

Setting up the application shell with Next.js and Tailwind

S

Strapi

Creator on the Strapi channel

Watch on YouTube ↗

16K viewsMay 2, 202212:38 runtime

Learn how to set up the foundational application shell for a Next.js project by installing and configuring Tailwind CSS. This guide walks you through the entire process, from installing dependencies like PostCSS and Autoprefixer to configuring the `tailwind.config.js` file for…

Chapters

#strapi#clip#cmscrm

Installing & Configuring Tailwind CSS

To add Tailwind CSS to a Next.js project, you first need to install the required dependencies:

tailwindcss
postcss
autoprefixer

After installation, run npx tailwindcss init -p to generate tailwind.config.js and postcss.config.js.

Important
The content property in tailwind.config.js is crucial for production. It tells Tailwind which files to scan to purge unused CSS classes, resulting in a much smaller final bundle. Configure it to include your pages and components directories:
content: [
  "./pages/**/*.{js,ts,jsx,tsx}",
  "./components/**/*.{js,ts,jsx,tsx}",
],

Finally, replace the contents of styles/globals.css with the Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Structuring the Application Shell

Custom Document (`_document.js`)

Create a pages/_document.js file to customize the server-rendered <html> and <body> tags.
This is useful for applying global classes that should persist across all pages, such as a background color or gradient on the <body>.

Layout Component (`components/layout.js`)

A reusable layout component provides a consistent structure (header, footer, navigation) for all pages.
It uses the children prop to render the specific content of each page.
Use the next/head component within the layout to manage the <head> section of your HTML, setting the page <title> and other SEO-related meta tags.

Navigation Component (`components/nav.js`)

A dedicated navigation component keeps your UI organized.

Tip
Always use the <Link> component from next/link for internal navigation between pages. This enables client-side routing, which is faster than a full-page reload and preserves application state.
import Link from 'next/link';

<Link href="/">Home</Link>
<Link href="/films">Films</Link>

Static assets like logos should be placed in the public directory and can be referenced with a root-relative path (e.g., /logo.svg).

Assembling the Application

To bring everything together:

Import the Nav component into the Layout component.
Import the Layout component into your page file (e.g., pages/index.js).
Wrap the page's content with the <Layout> component. The content inside will be passed as the children prop to the layout.

This creates a nested structure where pages are rendered within a consistent, shared application shell.

Installing Tailwind CSS Dependencies

Okay, in this video we're going to be installing Tailwind CSS to our Next.js project. Now, Tailwind CSS is a so-called utility-first CSS framework. You may have heard about it, you may have used it. I've certainly used it in some previous courses here in Jamstack Training. I really like it. You know, if you don't like it, then please go ahead and use, you know, just maybe vanilla CSS or any other CSS framework that you have used in the past.

But as I said, we're going to be installing it here for our project. And what I'll do is type in npm install and just install the required dependencies which is Tailwind CSS, PostCSS, and Autoprefixer. Okay, so these are the three dependencies that we're going to set up.

Configuring Tailwind for Next.js

Once the setup is complete, we will just execute npx tailwindcss init -p which will create a configuration file for us, along with a PostCSS config.

And tailwind.config.js is something that we will need to configure. And I'm going to take my configuration from my other file, which is going to replace this content property with pages and components. And then we don't actually—'cause I'm not going to write JavaScript—so jsx and ts or tsx extension, but I'm going to leave it anyway. This is a very generic way of covering all bases.

But essentially what we're saying here is that when we create a production build of our application, the service that we're going to be using should go through the pages and the components folder, every subfolder of it, and look up all the JavaScript, TypeScript, JSX, and TSX files and make sure that it collects the CSS classes from it and generates the final CSS bundle based on only the CSS classes that we're using here in this project.

Applying Global Styles and Testing the Setup

Okay, so that will of course be a lot smaller compared to if we were to just, you know, drop in the entire Tailwind CSS framework.

And in globals.css, in fact, I'm going to remove this whole module from here. So in globals.css we're just going to say @tailwind base, @tailwind components, and @tailwind utilities, like so. Okay, so that's done.

And now let's just go to index. I'm going to remove this module, we're not using any of these dependencies. I'm just going to create an empty fragment and in this fragment I'm going to add, say, an h1 with a className of font-bold text-5xl and that should be... that should be enough.

So let's hit save. Let's just run npm run dev again. So we'll see if now, if we see these changes added to the h1—I should probably add some text as well: "Hello world." So if we see this "Hello world" text bold and, you know, very large, then theoretically Tailwind CSS is installed. And in fact, that is the case. Awesome. So Tailwind CSS is now installed.

Creating a Custom Next.js Document

And configured. And now we're going to essentially look at how to create the structure for our application. Now, the one thing that I want to do is to create another file in the pages folder, and I'm going to call that _document.js.

So what _document.js is, it's basically a special file that we have in Next.js which allows us to customize how the html and body tags are used or being used by Next.js when it comes to rendering the page. So I can actually show you that by default... I'm just going to copy some stuff over. So by default, this is how the document.js file would look like. Okay? So it imports Html, Head, Main, and NextScript from next/document. It basically returns this structure. So we have the Html, we have the Head—so this is going to be all the titles and all the, you know, the heads, the CSS stuff—then we have the body which has the Main component and then the NextScript which will inject all the specific JavaScript onto the page.

Now we're going to change this slightly, and I'm going to add a class to the body because I want to have a different sort of look and feel for my Next app. And I'm just going to add Tailwind CSS specific classes here and I'm going to hit save. And now if I go back to my application, now I have this gradient background. So now this gradient is basically going to be applied to every single page that I have in my project.

Now the other thing that I'm going to do is on the pages folder create another... actually no, we're going to create a folder at the root level here called components. And inside the components we are going to create multiple files, but two files to get started with. And one is going to be called layout.js and then the other one is going to be called nav.js.

Building the Reusable Layout Component

Now layout.js is going to be responsible for specifying the layout of our application, okay? And I'm going to import a bunch of things. So we're going to import Head from next/head. So that's the Head component which will allow us to, you know, change the title of the page. It's also can be used for SEO purposes, so you may see some demos people using this. We're not going to get into that.

I'm also going to import, well, the layout points... I'm going to import a navigation, but now let's just create the layout. And I'm going to for now extract this thing called the children from the props. And I'm going to say Head with a capital H because that's our component, and in here I'm just going to specify the title. But as I said, you could specify, you know, all sorts of SEO stuff in here, maybe also open graph data, you know, so images for for social share and so on and so forth. And I'm just going to call this The Film Database.

And after the Head, let's just put everything in an empty fragment like so. And after the Head, I'm going to have... well, I'm just going to copy this over because I don't want to type all of this in, but I'm going to have a main element with a div with a bunch of CSS specific classes. And then the most important thing is that we are wrapping the children keyword here that I've extracted from the props in between curly braces. Basically I can use this layout and then I can specify some content to always apply to all my components and all my pages. And then the children is going to represent the actual content of the page that is going to be inserted here. So it's going to have this CSS around it at all times. And so the next step is of course to say export default layout.

And once that's done, that's great. And let's also take a look at nav. And we're going to work on... oh, I'm sorry, actually, this is—I just noticed that this should go to layout.js.

And then in nav we're going to build just our navigation, our navbar, okay? And what I'll do here, let's just see. So I'm going to return something, and I'm going to return a nav. And I am going to return a div in here. I'm just going to copy some stuff over basically from my pre-made example. I'm going to pass in the Strapi logo, which I need to of course grab. Then I'm going to have some SVGs here. And let me just add two links in here as well. So I'm going to take after the div, I'm just going to enter some unordered list items with a list item and I'm just going to close the unordered list like so. And I think I need to also close a div like so. Okay, so this is going to be our navigation.

Now, as I said, they need to somehow copy, you know, Strapi logo. So you can get the Strapi logo from their website. And what I'll do is I just need to add it to the public folder. So I'm just going to copy that over and now I have that available locally on my machine. Okay, so I think we're nearly done here, because I forgot to close that. And now we need to say export default nav.

So I'm basically building up this navigation and also notice I'm using Link and that's a learning point here. In Next.js, if you want to navigate between your various pages, it is highly recommended that you use the Link component that is part of the Next package. So I'm going to need to import Link from next/link. And once I do that, all these errors should go away. So now I have these Link components available with an href attribute that first goes to the root, and then the other one goes to /films. Of course, we need to implement that.

So let's go here. Oh, and in fact, I'm sorry, we now need to go to layout, and in layout we also need to specify where the navigation should be. And so I'm just going to import the Nav component that we've just created and add it right before the main here. Okay, so I'm just importing it from the right place. Okay, so far so good.

And there's one more thing that we need to do, and that is go into pages/index.js and as opposed to having an empty fragment here, I'm just going to import the Layout component and just wrap my content around this. So remember, this is what the children would refer to. And theoretically, if I've done everything correctly... I did not. So let's go back to the Layout component, apparently because there is something that is missing. Oh, and I'm not returning anything, I think that's what it said, right? So I need to... yeah, that's right. I put the wrong parenthesis there. Okay, let's see if we're there now.

Reviewing the Result and Next Steps

Excellent. So now what we have is a navigation bar. We do have a link linking out to home, to films—of course that doesn't work—and then we have the content of our index.js file. So now we have a very basic structure in the Next.js built up that we can go and work with. So from the next video, we will going to add some additional pages and then start to work on how to register users and how to consume data from Strapi.