[{"data":1,"prerenderedAt":430},["ShallowReactive",2],{"footer-primary":3,"footer-secondary":93,"footer-description":119,"stack-up-remix":121,"stack-up-remix-next":162,"sales-reps":178},{"items":4},[5,29,49,69],{"id":6,"title":7,"url":8,"page":8,"children":9},"522e608a-77b0-4333-820d-d4f44be2ade1","Solutions",null,[10,15,20,25],{"id":11,"title":12,"url":8,"page":13},"fcafe85a-a798-4710-9e7a-776fe413aae5","Headless CMS",{"permalink":14},"/solutions/headless-cms",{"id":16,"title":17,"url":8,"page":18},"79972923-93cf-4777-9e32-5c9b0315fc10","Backend-as-a-Service",{"permalink":19},"/solutions/backend-as-a-service",{"id":21,"title":22,"url":8,"page":23},"0fa8d0c1-7b64-4f6f-939d-d7fdb99fc407","Product Information",{"permalink":24},"/solutions/product-information-management",{"id":26,"title":27,"url":28,"page":8},"63946d54-6052-4780-8ff4-91f5a9931dcc","100+ Things to Build","https://directus.io/blog/100-tools-apps-and-platforms-you-can-build-with-directus",{"id":30,"title":31,"url":8,"page":8,"children":32},"8ab4f9b1-f3e2-44d6-919b-011d91fe072f","Resources",[33,37,41,45],{"id":34,"title":35,"url":36,"page":8},"f951fb84-8777-4b84-9e91-996fe9d25483","Documentation","https://docs.directus.io",{"id":38,"title":39,"url":40,"page":8},"366febc7-a538-4c08-a326-e6204957f1e3","Guides","https://docs.directus.io/guides/",{"id":42,"title":43,"url":44,"page":8},"aeb9128e-1c5f-417f-863c-2449416433cd","Community","https://directus.chat",{"id":46,"title":47,"url":48,"page":8},"da1c2ed8-0a77-49b0-a903-49c56cb07de5","Release Notes","https://github.com/directus/directus/releases",{"id":50,"title":51,"url":8,"page":8,"children":52},"d61fae8c-7502-494a-822f-19ecff3d0256","Support",[53,57,61,65],{"id":54,"title":55,"url":56,"page":8},"8c43c781-7ebd-475f-a931-747e293c0a88","Issue Tracker","https://github.com/directus/directus/issues",{"id":58,"title":59,"url":60,"page":8},"d77bb78e-cf7b-4e01-932a-514414ba49d3","Feature Requests","https://github.com/directus/directus/discussions?discussions_q=is:open+sort:top",{"id":62,"title":63,"url":64,"page":8},"4346be2b-2c53-476e-b53b-becacec626a6","Community Chat","https://discord.com/channels/725371605378924594/741317677397704757",{"id":66,"title":67,"url":68,"page":8},"26c115d2-49f7-4edc-935e-d37d427fb89d","Cloud Dashboard","https://directus.cloud",{"id":70,"title":71,"url":8,"page":8,"children":72},"49141403-4f20-44ac-8453-25ace1265812","Organization",[73,78,84,88],{"id":74,"title":75,"url":76,"page":77},"1f36ea92-8a5e-47c8-914c-9822a8b9538a","About","/about",{"permalink":76},{"id":79,"title":80,"url":81,"page":82},"b84bf525-5471-4b14-a93c-225f6c386005","Careers","#",{"permalink":83},"/careers",{"id":85,"title":86,"url":87,"page":8},"86aabc3a-433d-434b-9efa-ad1d34be0a34","Brand Assets","https://drive.google.com/drive/folders/1lBOTba4RaA5ikqOn8Ewo4RYzD0XcymG9?usp=sharing",{"id":89,"title":90,"url":8,"page":91},"8d2fa1e3-198e-4405-81e1-2ceb858bc237","Contact",{"permalink":92},"/contact",{"items":94},[95,101,107,113],{"id":96,"title":97,"url":8,"page":98,"children":100},"8a1b7bfa-429d-4ffc-a650-2a5fdcf356da","Cloud Policies",{"permalink":99},"/cloud-policies",[],{"id":102,"title":103,"url":81,"page":104,"children":106},"bea848ef-828f-4306-8017-6b00ec5d4a0c","License",{"permalink":105},"/bsl",[],{"id":108,"title":109,"url":81,"page":110,"children":112},"4e914f47-4bee-42b7-b445-3119ee4196ef","Terms",{"permalink":111},"/terms",[],{"id":114,"title":115,"url":81,"page":116,"children":118},"ea69eda6-d317-4981-8421-fcabb1826bfd","Privacy",{"permalink":117},"/privacy",[],{"description":120},"\u003Cp>A composable backend to build your Headless CMS, BaaS, and more. \u003C/p>",{"id":122,"slug":123,"vimeo_id":124,"description":125,"tile":126,"length":127,"resources":8,"people":128,"episode_number":132,"published":133,"title":134,"video_transcript_html":135,"video_transcript_text":136,"content":8,"status":137,"episode_people":138,"recommendations":149,"season":150,"seo":8},"56c91fbe-bb18-480b-b28c-92ec339de085","remix","913408766","In this video, you'll learn how to use the Directus SDK with a Remix application.","262209d6-8df0-48ef-8a94-6241735fdcae",9,[129],{"name":130,"url":131},"Kevin Lewis","https://directus.io/team/kevin-lewis",4,"2024-03-13","Get Started with Directus and Remix","\u003Cp>Speaker 0: This is a new Remix project created using the Remix CLI. In this video, I'll show you how to use Directus and Remix using the Directus SDK. Before we get started, make sure to install the Directus SDK so we can use it in a moment, and then run a development server with npm run dev. We want to create an instance of the Directus SDK that we can then use in multiple pages in this Remix application. So inside of this app directory, create a subdirectory called lib and inside of that, a file called directus.js.\u003C/p>\u003Cp>Import the requisite functions from the directus SDK and then use the create directus function to create a new instance of the SDK being sure that this string is the full URL of your directors project. Then export the client which we can then later import in future files. Inside of this directors project, there is already a global singleton collection. And inside of this collection is a title and a description field. In this project's access control settings, the public role has been given read access over all user created collections, as well as the director's files collection.\u003C/p>\u003Cp>I have replaced routes index dot TSX with the following. Firstly, we have imported the director's helper that we just created, as well as the read singleton function from the directors SDK. Inside of this files loader, we are going off using the directors SDK to read the singleton collection global. And this will return the object that comes back from Directus which will contain an ID, a title, and a description. This is now available, these three properties, inside of the use loaded data function.\u003C/p>\u003Cp>We have destructured that, and we can now just use the title and description inside of the page. Inside of our directors project, we've also created a pages collection. Each item in the pages collection has 3 fields. Firstly, the slug. The slug exists to determine what page this data will actually load at.\u003C/p>\u003Cp>So we're expecting this data to load at slash about. They also have a title and a content WYSIWYG, what you see is what you get editor. So we get this nice rich text editor, but underlying it is just pure HTML. Inside of the routes directory, create a new file called dollar sign slug.tsx, The dollar sign denoting that this is a dynamic route. This one is very similar to before.\u003C/p>\u003Cp>We import the helper. This time, we import the read item function from the SDK. And inside of the loader, we are gaining access to whatever this dynamic value is. And we are running a read item call here on the pages collection with the value of that URL parameter, slug. That data is once again made available in the use loader data function and we can use it inside of the rendered JSX.\u003C/p>\u003Cp>Now take note here that we are using dangerously set in a HTML to replace this div with the raw HTML that was inside of our director's item. This is fine if you can absolutely trust that the information being entered in that WYSIWYG editor is correct and not at all malicious. In our directors project, we also have a posts collection. The first three fields are used exactly the same way as pages. The slug, which will denote part of the URL that this page will load at, title, and content.\u003C/p>\u003Cp>But we also have an image, which is actually a relational field to the director's files collection, a publish date, and an author. This is also a relational field to an item in the author's collection. Right now, authors only have a name because I just wanna show you how to get this relational data. Inside of the route directory, create a new file called blog dot underscore index dot tsx. This is the file that will render when the user goes to slash blog.\u003C/p>\u003Cp>In this file, we'll use the read items function to query the post's collection. Now you'll notice here that we're also passing in a query object with 2 properties. Firstly, the fields. This specifies exactly what files we want to return from the Directus instance. We're doing this for a couple of reasons.\u003C/p>\u003Cp>Firstly, we don't want to return everything, specifically, the content field because it's really large. It contains a lot of data in it, and there's no need to increase the size of the request. Secondly, we are getting relational data or nested data from that author relationship. So in here, we're stepping into that author item and we're going to also return the name. The second property is sort, and it means that the latest item will come first, which is quite standard for a block.\u003C/p>\u003Cp>We then use this data that we fetched in the loader in order to loop over each item that is returned and display a list item. That list item will send users to slash blog slash slug. It will show the title, the publish date, and the author name. Now take note here that publish date, title, slug, they are all direct properties. But author, because it is a relational item and nested item, is in a nested object.\u003C/p>\u003Cp>So post dot author dot name. To create new blog pages, let's create a new file in routes. We'll call this 1 blog.$signslugdot tsx. Once again, dollar sign means that is a dynamic part of the URL. This should look really similar to when we created dynamic pages.\u003C/p>\u003Cp>We're using the read item function from the SDK to go query the posts collection, but just the one that has the specific key of the slug, which is in the URL. This time, though, we are also including that query object to what fields we want to return. We're saying here that we wanna get all top level fields, but we also wanna get the author name and the image ID and description. And where as well as rendering the title and the content, we're also rendering the image. All directors assets can be accessed using the full project URL, which we're grabbing here from the SDK slash assets slash image ID.\u003C/p>\u003Cp>And we are transforming this on the fly to only return an item that's 400 pixels big. We're also using the description set on that file inside of Directus as alt text. Now you may have noticed here there is no slash. The Director SDK will automatically append a slash if you don't provide it when initializing a client. So there is a slash in there.\u003C/p>\u003Cp>So that's our full project URL/assets/id, and then transformed to have a width of 400, and using the description as the alt text. You now know how to grab data from Directus and use it inside of your Remix application. I hope you've enjoyed this video and I'll see you in the next one.\u003C/p>","This is a new Remix project created using the Remix CLI. In this video, I'll show you how to use Directus and Remix using the Directus SDK. Before we get started, make sure to install the Directus SDK so we can use it in a moment, and then run a development server with npm run dev. We want to create an instance of the Directus SDK that we can then use in multiple pages in this Remix application. So inside of this app directory, create a subdirectory called lib and inside of that, a file called directus.js. Import the requisite functions from the directus SDK and then use the create directus function to create a new instance of the SDK being sure that this string is the full URL of your directors project. Then export the client which we can then later import in future files. Inside of this directors project, there is already a global singleton collection. And inside of this collection is a title and a description field. In this project's access control settings, the public role has been given read access over all user created collections, as well as the director's files collection. I have replaced routes index dot TSX with the following. Firstly, we have imported the director's helper that we just created, as well as the read singleton function from the directors SDK. Inside of this files loader, we are going off using the directors SDK to read the singleton collection global. And this will return the object that comes back from Directus which will contain an ID, a title, and a description. This is now available, these three properties, inside of the use loaded data function. We have destructured that, and we can now just use the title and description inside of the page. Inside of our directors project, we've also created a pages collection. Each item in the pages collection has 3 fields. Firstly, the slug. The slug exists to determine what page this data will actually load at. So we're expecting this data to load at slash about. They also have a title and a content WYSIWYG, what you see is what you get editor. So we get this nice rich text editor, but underlying it is just pure HTML. Inside of the routes directory, create a new file called dollar sign slug.tsx, The dollar sign denoting that this is a dynamic route. This one is very similar to before. We import the helper. This time, we import the read item function from the SDK. And inside of the loader, we are gaining access to whatever this dynamic value is. And we are running a read item call here on the pages collection with the value of that URL parameter, slug. That data is once again made available in the use loader data function and we can use it inside of the rendered JSX. Now take note here that we are using dangerously set in a HTML to replace this div with the raw HTML that was inside of our director's item. This is fine if you can absolutely trust that the information being entered in that WYSIWYG editor is correct and not at all malicious. In our directors project, we also have a posts collection. The first three fields are used exactly the same way as pages. The slug, which will denote part of the URL that this page will load at, title, and content. But we also have an image, which is actually a relational field to the director's files collection, a publish date, and an author. This is also a relational field to an item in the author's collection. Right now, authors only have a name because I just wanna show you how to get this relational data. Inside of the route directory, create a new file called blog dot underscore index dot tsx. This is the file that will render when the user goes to slash blog. In this file, we'll use the read items function to query the post's collection. Now you'll notice here that we're also passing in a query object with 2 properties. Firstly, the fields. This specifies exactly what files we want to return from the Directus instance. We're doing this for a couple of reasons. Firstly, we don't want to return everything, specifically, the content field because it's really large. It contains a lot of data in it, and there's no need to increase the size of the request. Secondly, we are getting relational data or nested data from that author relationship. So in here, we're stepping into that author item and we're going to also return the name. The second property is sort, and it means that the latest item will come first, which is quite standard for a block. We then use this data that we fetched in the loader in order to loop over each item that is returned and display a list item. That list item will send users to slash blog slash slug. It will show the title, the publish date, and the author name. Now take note here that publish date, title, slug, they are all direct properties. But author, because it is a relational item and nested item, is in a nested object. So post dot author dot name. To create new blog pages, let's create a new file in routes. We'll call this 1 blog.$signslugdot tsx. Once again, dollar sign means that is a dynamic part of the URL. This should look really similar to when we created dynamic pages. We're using the read item function from the SDK to go query the posts collection, but just the one that has the specific key of the slug, which is in the URL. This time, though, we are also including that query object to what fields we want to return. We're saying here that we wanna get all top level fields, but we also wanna get the author name and the image ID and description. And where as well as rendering the title and the content, we're also rendering the image. All directors assets can be accessed using the full project URL, which we're grabbing here from the SDK slash assets slash image ID. And we are transforming this on the fly to only return an item that's 400 pixels big. We're also using the description set on that file inside of Directus as alt text. Now you may have noticed here there is no slash. The Director SDK will automatically append a slash if you don't provide it when initializing a client. So there is a slash in there. So that's our full project URL/assets/id, and then transformed to have a width of 400, and using the description as the alt text. You now know how to grab data from Directus and use it inside of your Remix application. I hope you've enjoyed this video and I'll see you in the next one.","published",[139],{"people_id":140},{"id":141,"first_name":142,"last_name":143,"avatar":144,"bio":145,"links":146},"82b3f7e5-637b-4890-93b2-378b497d5dc6","Kevin","Lewis","a662f91b-1ee9-4277-8c9d-3ac1878e44ad","Director of Developer Experience at Directus",[147],{"url":131,"service":148},"website",[],{"id":151,"number":152,"year":153,"episodes":154,"show":159},"c9653ab5-c084-48ce-b5ce-5195ccbc09a2",1,"2024",[155,156,157,122,158],"ab41049a-0090-4568-ad0d-5a31892ae7c6","b55b2706-5a8e-4205-9a30-66beae51d6b2","8a72cda0-83ae-42ee-8bbf-87685e3021fd","fafde41d-17cb-49bf-b139-a8ad11e50ae1",{"title":160,"tile":161},"Stack Up","fcc131d2-1a51-4f6b-8a6b-fa6b7c3700bd",{"id":158,"slug":163,"season":151,"vimeo_id":164,"description":165,"tile":166,"length":167,"resources":8,"people":168,"episode_number":170,"published":171,"title":172,"video_transcript_html":173,"video_transcript_text":174,"content":8,"seo":8,"status":137,"episode_people":175,"recommendations":177},"next","925880204","In this video, you'll learn how to use the Directus SDK with Next.js","10282be9-8051-4fb8-9684-aca9cddf4829",10,[169],{"name":130,"url":131},5,"2024-03-20","Get Started with Directus and Next.js","\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>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?\u003C/p>\u003Cp>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.\u003C/p>\u003Cp>Have a fantastic day. Bye for now.\u003C/p>","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.",[176],"fa9bfca1-4cb7-463c-9374-bf7a553dce7a",[],{"reps":179},[180,236],{"name":181,"sdr":8,"link":182,"countries":183,"states":185},"John Daniels","https://meet.directus.io/meetings/john2144/john-contact-form-meeting",[184],"United States",[186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235],"Michigan","Indiana","Ohio","West Virginia","Kentucky","Virginia","Tennessee","North Carolina","South Carolina","Georgia","Florida","Alabama","Mississippi","New York","MI","IN","OH","WV","KY","VA","TN","NC","SC","GA","FL","AL","MS","NY","Connecticut","CT","Delaware","DE","Maine","ME","Maryland","MD","Massachusetts","MA","New Hampshire","NH","New Jersey","NJ","Pennsylvania","PA","Rhode Island","RI","Vermont","VT","Washington DC","DC",{"name":237,"link":238,"countries":239},"Michelle Riber","https://meetings.hubspot.com/mriber",[240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358,359,360,361,362,363,364,365,366,367,368,369,370,371,372,373,374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398,399,400,401,402,403,404,405,406,407,408,409,410,411,412,413,414,415,416,417,418,419,420,421,422,423,424,425,426,427,217,428,429],"Albania","ALB","Algeria","DZA","Andorra","AND","Angola","AGO","Austria","AUT","Belgium","BEL","Benin","BEN","Bosnia and Herzegovina","BIH","Botswana","BWA","Bulgaria","BGR","Burkina Faso","BFA","Burundi","BDI","Cameroon","CMR","Cape Verde","CPV","Central African Republic","CAF","Chad","TCD","Comoros","COM","Côte d'Ivoire","CIV","Croatia","HRV","Czech Republic","CZE","Democratic Republic of Congo","COD","Denmark","DNK","Djibouti","DJI","Egypt","EGY","Equatorial Guinea","GNQ","Eritrea","ERI","Estonia","EST","Eswatini","SWZ","Ethiopia","ETH","Finland","FIN","France","FRA","Gabon","GAB","Gambia","GMB","Ghana","GHA","Greece","GRC","Guinea","GIN","Guinea-Bissau","GNB","Hungary","HUN","Iceland","ISL","Ireland","IRL","Italy","ITA","Kenya","KEN","Latvia","LVA","Lesotho","LSO","Liberia","LBR","Libya","LBY","Liechtenstein","LIE","Lithuania","LTU","Luxembourg","LUX","Madagascar","MDG","Malawi","MWI","Mali","MLI","Malta","MLT","Mauritania","MRT","Mauritius","MUS","Moldova","MDA","Monaco","MCO","Montenegro","MNE","Morocco","MAR","Mozambique","MOZ","Namibia","NAM","Niger","NER","Nigeria","NGA","North Macedonia","MKD","Norway","NOR","Poland","POL","Portugal","PRT","Republic of Congo","COG","Romania","ROU","Rwanda","RWA","San Marino","SMR","São Tomé and Príncipe","STP","Senegal","SEN","Serbia","SRB","Seychelles","SYC","Sierra Leone","SLE","Slovakia","SVK","Slovenia","SVN","Somalia","SOM","South Africa","ZAF","South Sudan","SSD","Spain","ESP","Sudan","SDN","Sweden","SWE","Tanzania","TZA","Togo","TGO","Tunisia","TUN","Uganda","UGA","United Kingdom","GBR","Vatican City","VAT","Zambia","ZMB","Zimbabwe","ZWE","UK","Germany","Netherlands","Switzerland","CH","NL",1773850438194]