Get Started with Directus and Next.js

Speaker 0: This is a brand new Next JS project created using the Next CLI. I've deleted all of the files inside of this app directory here, so we can start from scratch. And before we get started, also make sure to install the Director's SDK. We want to create and share a single instance of the Directus JavaScript SDK between multiple pages in this application. Create a new directory called lib and inside of that, a file called directors dotjs.

In this file, we will import the required functions, create a new instance of the directus SDK, and export it so we can later import it in our future files. We can now go and run-in our terminal, npm run dev, and this will spin up a development server that we can use throughout the length of this tutorial. In my existing directors project, I have a global collection with a title and a description. And in this project, the public role has been given read access over all user created collections, and additionally, the director's files system collection. Inside of the app directory, create a new file called page dotjsx.

First, we will import that shared helper that we just created, as well as the read items function from the Directus SDK. We will then create a get globals function that will make a request to Directus to read the global collection. We will then create a default function which uses the get globals function, getting the data from directors, and rendering the title and description in the page. In the director's project, we also have a pages collection. Every page has a slug, which is the primary key for this collection.

It's a manually entered string and it correlates with the URL. So we want this page to load whenever a user visits slash about. A page will also have a title and a content field. The content is a WYSIWYG, a what you see is what you get editor. And what that practically means is underneath this nice UI here is just raw HTML.

Inside of the app directory, create a subdirectory called slug. Notice these square brackets. And inside of that, a page called page dotjsx. The square brackets in slug means that this is a dynamic route. This page will load when someone goes to slash about, slash hello, slash anything else.

This page will then be loaded. Once again, we are importing that shared helper from the directors file. We are also importing the read item, notice singular, function from the SDK. And we're also importing the not found function from the next navigation package. The get page function will accept a slug and will then use the Director's SDK to read the specific item in the page's collection with a primary key of the slug.

If the page is not found, we will then use the not found function which will throw a 4 zero four error. In the default exported function, we will destructure params from the argument, and this will include the dynamic value in the URL. So we can then grab the page by calling the get page function, passing in the slug, which is this dynamic part here. In this case, slash about. It will then get that page data from Directus and render it into our page.

Now take note that we are using dangerously set in HTML here. And what this will do is take that HTML and directly render it into our page. This should only be used for trusted content. But with this, we do now have a dynamic page. In the director's project, there is also a posts and an authors collection.

Now, the posts look quite similar to the pages. There is a slug which is used in the URL, a title, and a content WYSIWYG. But there is additionally an image, which actually is a relational field to the director's files collection, I'll show you how that works in a moment. A publish date and an author, which is also a relational field. Authors only have a name.

It's a very simple author, data model, just so I can show you how relational fields work. Inside of the app directory, create a new folder called blog, and inside of that, once again, a page dotjsx file. Once again, we import the helper. We import read items from the SDK. And then we use read items to grab the data from the post's collection.

What's interesting here though is that we're passing in this object which allows us to use Directus' powerful query parameters to change the data that we get back. Firstly, we're specifying what fields we want to return. We want to return the slug, the title and the publish date. Note that we are not returning the content because we're not going to render it in this page, so there's no point increasing the size of the payload that is returned. In order to get the relational author name, we include an object with the name of the field and then the name of the nested field.

So this will return the name from the linked author. We are also using sort in order to sort the returned data latest first. Inside of the returned HTML, we are going to loop through each of the returned posts and render a list item. The list item will have a link to slash blog slash slug. It will show the title, the publish date, and the author name.

Now take note that this is nested data. Whereas post dot publish date and post dot title are direct properties inside of post, the author is nested inside of an author object like so. So this is our rendered blog listing. You will note that all of the titles are there. It is sorted latest first and we see the author name.

Now, if we click on one of these blog posts, we should get a 404. And that is, of course, because we haven't yet built the individual blog post page. Inside of the blog directory, create a new subdirectory called slug, once again in square brackets, and inside of that, a page dotjsx. Rendering the individual blog page should now feel quite familiar. We're importing the helper, readitem, and not found.

We are creating a get post function that will use the SDK in order to fetch a single item specifying the fields we want to return. What's specifically important here are these nested fields. And if this item is not found, we will throw not found. Inside of the returned HTML here, we once again are showing the title. We are using dangerously set in a HTML to render the value of content, but we also have this image field.

All files inside of your director's project are accessible from your director's project URL slash assets slash image ID or file ID. Now you'll note here that there is not a forward slash here. The director's SDK will automatically append this to the URL if it isn't provided when initializing the client. So this full URL is, stackup.directors.app/assets/id, and then note here that we are using the built in image transformation to just provide the image at a width of 600 pixels. If you don't need a larger image, why would you send a larger image down the pipe?

We are also using the image description held within Directus as alternative text. And that is how you get started with directus and next JS. I hope you found this tutorial interesting and we have more planned. So expect tutorials around internationalization, authentication, and setting up live preview. But that's for later.

Have a fantastic day. Bye for now.