Table of Contents
- 1. preview.contentful.com (Content Preview API)
- 2. api.contentful.com (Management API)
- Getting Data
- Modifying Data
- 3. cdn.contentful.com (Content Delivery API)
- 4. graphql.contentful.com (GraphQL Content Delivery API)
- 5. images.ctfassets.net (Image API)
- 6. upload.contentful.com (Upload API)
- Conclusion:
- Cloudapp-dev, and before you leave us
Contentful is a great Headless CMS that is easy to integrate with new or existing Next.js 14 projects. I use it a lot in my web projects. However, there are several ways to manage content (Creating, updating, deleting, and delivering content). Let’s do a deep dive into the REST capabilities of this CMS.
Below, you will find a list of all available Endpoints and some examples as well.
1. preview.contentful.com (Content Preview API)
Purpose
This is the Preview API endpoint used to access unpublished (draft) content in Contentful. It’s useful for seeing changes in content before they go live.
Usage
Typically used in development environments or for previewing content within content management systems (CMS).
Access
Requires a preview API key.
Example Use Case
A content editor wants to preview changes made to a blog post before it is published.
Let’s assume you have a Contentful Space with the ID “xxxyyy” and you are working on the “master” environment, and you have a content record with the ID “3xwgduhyZmdUYieeiW5Pq2”, then your URL would be:
https://preview.contentful.com/spaces/xxxyyy/environments/master/entries/3xwgduhyZmdUYieeiW5Pq2
Further information regarding the right use of Contentful Environments.
You can get the Content Preview Token from the Contentful Backend by clicking on “Settings” in the upper right corner, then “API Keys”. Create a new API Key or open the one present in the UI and scroll down till you see it. Now, create a GET Request in Postman and use the correct URL. Set the Preview Token as Bearer Token in the Authorization Tab and click “Send” to get the “preview” version of your content record.
{
"metadata": {
"tags": []
},
"sys": {
"space": {
"sys": {
"type": "Link",
"linkType": "Space",
"id": "xxxyyy"
}
},
"type": "Entry",
"id": "3xwgduhyZmdUYieeiW5Pq2",
"contentType": {
"sys": {
"type": "Link",
"linkType": "ContentType",
"id": "pageBlogPost"
}
},
"revision": 0,
"createdAt": "2024-09-09T15:15:41.252Z",
"updatedAt": "2024-09-09T15:17:02.481Z",
"environment": {
"sys": {
"id": "master",
"type": "Link",
"linkType": "Environment"
}
},
"locale": "en-US"
},
"fields": {
"internalName": "Testpost EN Preview",
"slug": "Testpost-slug-EN",
"publishedDate": "2024-07-03T12:34:56Z",
"title": "Title EN",
"content": {
"data": {},
"content": [
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Mastering Next.js and TypeScript: A Comprehensive Guide",
"nodeType": "text"
}
],
"nodeType": "heading-1"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "In the rapidly evolving landscape of web development, the synergy between Next.js and TypeScript has become a cornerstone for building efficient, scalable, and robust applications. This comprehensive guide will delve into why combining Next.js and TypeScript is a game-changer for developers, explore the core benefits, and provide a roadmap for getting started. Whether you're a seasoned developer or a newcomer to these technologies, understanding their integration can significantly enhance your development workflow and project outcomes.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Why Choose Next.js with TypeScript?",
"nodeType": "text"
}
],
"nodeType": "heading-2"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Next.js, a React-based framework, is renowned for its server-side rendering capabilities, static site generation, and an intuitive file-based routing system. These features make it an ideal choice for developing high-performance web applications. On the other hand, TypeScript, a superset of JavaScript, introduces static typing, which helps catch errors during development, thus making code more predictable and maintainable. The combination of Next.js and TypeScript leverages the strengths of both tools, providing a powerful environment for developing modern web applications.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "One of the primary reasons to use Next.js with TypeScript is the improved developer experience. TypeScript’s type-checking capabilities ensure that errors are caught early in the development process, reducing the likelihood of runtime errors. Additionally, TypeScript’s integration with popular code editors like VS Code provides features such as autocompletion, refactoring, and inline documentation, enhancing productivity. Next.js’s robust framework combined with these features results in a seamless development experience.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Key Benefits of Using Next.js with TypeScript",
"nodeType": "text"
}
],
"nodeType": "heading-2"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Integrating Next.js with TypeScript offers several advantages that can streamline development and improve application quality. First and foremost is type safety. TypeScript enables developers to define data structures and interfaces, which helps prevent common errors such as undefined values or incorrect data types. This results in more reliable and maintainable codebases, as developers can easily understand and manage complex applications.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Another significant benefit is better tooling and editor support. TypeScript’s compatibility with various code editors means that developers can take advantage of features like intelligent code completion, navigation, and refactoring tools. This leads to faster development cycles and easier debugging processes. Moreover, Next.js’s built-in support for TypeScript ensures that setting up a new project is straightforward, with minimal configuration required.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Furthermore, combining Next.js with TypeScript enhances code scalability and collaboration. Large codebases become easier to manage as type definitions act as a form of documentation, allowing team members to understand each other’s code more easily. This is particularly beneficial in collaborative environments where multiple developers work on the same project, ensuring consistency and reducing the learning curve for new team members.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Getting Started: Setting Up Next.js with TypeScript",
"nodeType": "text"
}
],
"nodeType": "heading-2"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Starting a Next.js project with TypeScript is a straightforward process, thanks to Next.js’s excellent support for TypeScript. To begin, you can create a new Next.js project using the following command:",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [
{
"type": "code"
}
],
"value": "npx create-next-app@latest --typescript",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "This command sets up a new Next.js project configured with TypeScript. The project structure includes TypeScript configuration files, allowing you to start writing TypeScript code immediately. Next.js also provides TypeScript definitions out of the box, ensuring that you can leverage TypeScript’s features without additional setup.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Once the project is set up, you can start by creating a new TypeScript file, for example, index.tsx. This file serves as the entry point for your application. You can define React components and use TypeScript interfaces to define props and state types, ensuring type safety throughout your application. Next.js’s hot-reloading feature ensures that changes are reflected in real-time, providing a smooth development experience.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Advanced Techniques: Optimizing Next.js and TypeScript Integration",
"nodeType": "text"
}
],
"nodeType": "heading-2"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "To fully harness the power of Next.js and TypeScript, consider implementing advanced techniques such as custom hooks, API routes, and dynamic imports. Custom hooks in TypeScript allow you to encapsulate and reuse logic across your application. By defining types for your hooks, you can ensure that they are used correctly, reducing bugs and improving code clarity.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "API routes in Next.js enable you to create backend endpoints within your application. By using TypeScript to define the request and response types, you can ensure that your API routes are robust and well-documented. This is particularly useful for creating RESTful APIs or integrating with third-party services.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Dynamic imports are another powerful feature of Next.js that can be enhanced with TypeScript. By dynamically importing components, you can reduce the initial load time of your application, improving performance. TypeScript’s support for dynamic imports ensures that the imported modules are correctly typed, allowing for better error handling and code splitting.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Best Practices for Maintaining a Next.js and TypeScript Project",
"nodeType": "text"
}
],
"nodeType": "heading-2"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Maintaining a Next.js project with TypeScript requires adherence to best practices to ensure long-term success. First, consistently use TypeScript’s type annotations and interfaces to define data structures and component props. This practice helps catch errors early and improves code readability.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Secondly, leverage Next.js’s built-in features such as static site generation (SSG) and server-side rendering (SSR) to optimize performance. Use TypeScript to define the types for the data fetched during these processes, ensuring that your data handling is type-safe and efficient.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Additionally, make use of automated testing frameworks such as Jest and React Testing Library to test your components and logic. TypeScript’s type definitions can be used in your tests to ensure that your code behaves as expected. Regular testing and type-checking can prevent regressions and ensure that your application remains stable as it evolves.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "Conclusion: The Future of Web Development with Next.js and TypeScript",
"nodeType": "text"
}
],
"nodeType": "heading-2"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "The combination of Next.js and TypeScript represents a powerful paradigm in modern web development. By leveraging the strengths of both technologies, developers can build scalable, maintainable, and high-performance web applications. The robust type-checking of TypeScript, combined with the versatile features of Next.js, provides a seamless and efficient development experience.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "As web development continues to evolve, the integration of frameworks like Next.js with TypeScript is likely to become even more prevalent. By adopting these technologies and following best practices, developers can stay ahead of the curve and deliver exceptional web applications. Whether you are starting a new project or looking to improve an existing one, Next.js and TypeScript offer the tools and capabilities to achieve your goals. Embrace the future of web development by mastering Next.js and TypeScript today.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
},
{
"data": {},
"content": [
{
"data": {},
"marks": [],
"value": "By focusing on the key aspects and benefits of combining Next.js and TypeScript, this guide aims to provide a clear and comprehensive understanding of how to leverage these technologies effectively. As you embark on your development journey, keep experimenting and exploring the vast possibilities that Next.js and TypeScript offer, ensuring that you stay updated with the latest advancements and best practices.",
"nodeType": "text"
}
],
"nodeType": "paragraph"
}
],
"nodeType": "document"
}
}
}As you can see in the JSON, the content entries type is “PageBlogPost”. Below the different fields used in the contenttype.
2. api.contentful.com (Management API)
Purpose
This is the Content Management API endpoint used for managing content and other resources in a Contentful space. It provides CRUD operations (Create, Read, Update, Delete) for entries, assets, content types, environments, etc.
Usage
Used by developers to automate tasks like content type creation, updating entries programmatically, or managing environment settings.
Access
Requires a Content Management API key.
Example Use Case
A developer writes a script to migrate content from one environment to another.
Let’s create a new content record of type “pageBlogPost”. The URL could be:
https://api.contentful.com/spaces/xxxyyy/environments/master/entries
Get the CMA Token from the “CMA tokens” section under settings in your Contentful account and use it again as Bearer Token in your Postman POST request. Add the headers “X-Contentful-Content-Type” -> pageBlogPost (or every content type you created) and “Content-Type” -> application/vnd.contentful.management.v1+json
Select “raw” for the body tab and use this example JSON.
{
"fields": {
"internalName": {
"en-US": "Testpost EN"
},
"slug": {
"en-US": "Testpost-slug-EN"
},
"publishedDate": {
"en-US": "2024-07-03T12:34:56Z"
},
"title": {
"en-US": "Title EN",
"de-DE": "Title de"
},
"content": {
"en-US": {
"content": [
{
"nodeType": "heading-1",
"content": [
{
"nodeType": "text",
"value": "Mastering Next.js and TypeScript: A Comprehensive Guide",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "In the rapidly evolving landscape of web development, the synergy between Next.js and TypeScript has become a cornerstone for building efficient, scalable, and robust applications. This comprehensive guide will delve into why combining Next.js and TypeScript is a game-changer for developers, explore the core benefits, and provide a roadmap for getting started. Whether you're a seasoned developer or a newcomer to these technologies, understanding their integration can significantly enhance your development workflow and project outcomes.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-2",
"content": [
{
"nodeType": "text",
"value": "Why Choose Next.js with TypeScript?",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Next.js, a React-based framework, is renowned for its server-side rendering capabilities, static site generation, and an intuitive file-based routing system. These features make it an ideal choice for developing high-performance web applications. On the other hand, TypeScript, a superset of JavaScript, introduces static typing, which helps catch errors during development, thus making code more predictable and maintainable. The combination of Next.js and TypeScript leverages the strengths of both tools, providing a powerful environment for developing modern web applications.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "One of the primary reasons to use Next.js with TypeScript is the improved developer experience. TypeScript’s type-checking capabilities ensure that errors are caught early in the development process, reducing the likelihood of runtime errors. Additionally, TypeScript’s integration with popular code editors like VS Code provides features such as autocompletion, refactoring, and inline documentation, enhancing productivity. Next.js’s robust framework combined with these features results in a seamless development experience.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-2",
"content": [
{
"nodeType": "text",
"value": "Key Benefits of Using Next.js with TypeScript",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Integrating Next.js with TypeScript offers several advantages that can streamline development and improve application quality. First and foremost is type safety. TypeScript enables developers to define data structures and interfaces, which helps prevent common errors such as undefined values or incorrect data types. This results in more reliable and maintainable codebases, as developers can easily understand and manage complex applications.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Another significant benefit is better tooling and editor support. TypeScript’s compatibility with various code editors means that developers can take advantage of features like intelligent code completion, navigation, and refactoring tools. This leads to faster development cycles and easier debugging processes. Moreover, Next.js’s built-in support for TypeScript ensures that setting up a new project is straightforward, with minimal configuration required.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Furthermore, combining Next.js with TypeScript enhances code scalability and collaboration. Large codebases become easier to manage as type definitions act as a form of documentation, allowing team members to understand each other’s code more easily. This is particularly beneficial in collaborative environments where multiple developers work on the same project, ensuring consistency and reducing the learning curve for new team members.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-2",
"content": [
{
"nodeType": "text",
"value": "Getting Started: Setting Up Next.js with TypeScript",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Starting a Next.js project with TypeScript is a straightforward process, thanks to Next.js’s excellent support for TypeScript. To begin, you can create a new Next.js project using the following command:",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "npx create-next-app@latest --typescript",
"marks": [
{
"type": "code"
}
],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "This command sets up a new Next.js project configured with TypeScript. The project structure includes TypeScript configuration files, allowing you to start writing TypeScript code immediately. Next.js also provides TypeScript definitions out of the box, ensuring that you can leverage TypeScript’s features without additional setup.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Once the project is set up, you can start by creating a new TypeScript file, for example, index.tsx. This file serves as the entry point for your application. You can define React components and use TypeScript interfaces to define props and state types, ensuring type safety throughout your application. Next.js’s hot-reloading feature ensures that changes are reflected in real-time, providing a smooth development experience.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-2",
"content": [
{
"nodeType": "text",
"value": "Advanced Techniques: Optimizing Next.js and TypeScript Integration",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "To fully harness the power of Next.js and TypeScript, consider implementing advanced techniques such as custom hooks, API routes, and dynamic imports. Custom hooks in TypeScript allow you to encapsulate and reuse logic across your application. By defining types for your hooks, you can ensure that they are used correctly, reducing bugs and improving code clarity.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "API routes in Next.js enable you to create backend endpoints within your application. By using TypeScript to define the request and response types, you can ensure that your API routes are robust and well-documented. This is particularly useful for creating RESTful APIs or integrating with third-party services.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Dynamic imports are another powerful feature of Next.js that can be enhanced with TypeScript. By dynamically importing components, you can reduce the initial load time of your application, improving performance. TypeScript’s support for dynamic imports ensures that the imported modules are correctly typed, allowing for better error handling and code splitting.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-2",
"content": [
{
"nodeType": "text",
"value": "Best Practices for Maintaining a Next.js and TypeScript Project",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Maintaining a Next.js project with TypeScript requires adherence to best practices to ensure long-term success. First, consistently use TypeScript’s type annotations and interfaces to define data structures and component props. This practice helps catch errors early and improves code readability.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Secondly, leverage Next.js’s built-in features such as static site generation (SSG) and server-side rendering (SSR) to optimize performance. Use TypeScript to define the types for the data fetched during these processes, ensuring that your data handling is type-safe and efficient.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "Additionally, make use of automated testing frameworks such as Jest and React Testing Library to test your components and logic. TypeScript’s type definitions can be used in your tests to ensure that your code behaves as expected. Regular testing and type-checking can prevent regressions and ensure that your application remains stable as it evolves.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "heading-2",
"content": [
{
"nodeType": "text",
"value": "Conclusion: The Future of Web Development with Next.js and TypeScript",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "The combination of Next.js and TypeScript represents a powerful paradigm in modern web development. By leveraging the strengths of both technologies, developers can build scalable, maintainable, and high-performance web applications. The robust type-checking of TypeScript, combined with the versatile features of Next.js, provides a seamless and efficient development experience.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "As web development continues to evolve, the integration of frameworks like Next.js with TypeScript is likely to become even more prevalent. By adopting these technologies and following best practices, developers can stay ahead of the curve and deliver exceptional web applications. Whether you are starting a new project or looking to improve an existing one, Next.js and TypeScript offer the tools and capabilities to achieve your goals. Embrace the future of web development by mastering Next.js and TypeScript today.",
"marks": [],
"data": {}
}
],
"data": {}
},
{
"nodeType": "paragraph",
"content": [
{
"nodeType": "text",
"value": "By focusing on the key aspects and benefits of combining Next.js and TypeScript, this guide aims to provide a clear and comprehensive understanding of how to leverage these technologies effectively. As you embark on your development journey, keep experimenting and exploring the vast possibilities that Next.js and TypeScript offer, ensuring that you stay updated with the latest advancements and best practices.",
"marks": [],
"data": {}
}
],
"data": {}
}
],
"nodeType": "document",
"data": {}
}
}
}
}As you can see I use two languages: German (DE) and English (EN). If the creation was successful you well receive a “201 Created” and you can see your record in the Contentful Backend.
Getting Data
With this URL -> https://api.contentful.com/spaces/xxxyyy/environments/master/entries/your-contentful-content-record-id
you can get the previously created content record JSON data.
Modifying Data
Let’s prepare a PUT request ->
https://api.contentful.com/spaces/xxxyyy/environments/master/entries/3xwgduhyZmdUYieeiW5Pq2
and the Header “X-Contentful-Version” to indicate the version for the modification. You can get the Version from the JSON of the previous GET request ( “publishedVersion”: 3, “publishedAt”: “2024–09–09T15:21:08.978Z”,)
3. cdn.contentful.com (Content Delivery API)
Purpose
This is the Content Delivery API (CDA) endpoint used to deliver published content. It is backed by a Content Delivery Network (CDN) for efficient, fast access to content.
Usage
Commonly used in production environments to fetch published content for websites or applications.
Access
Requires a Content Delivery API key.
Example Use Case
A website or mobile app fetches and displays live content for users.
Get the Content Delivery API — access token from your account under settings / API Keys
This call uses the fast Contentful CDN and gives you a list of 10 content records (type -> pageBlogPost)
4. graphql.contentful.com (GraphQL Content Delivery API)
Purpose
This is the GraphQL Content Delivery API endpoint that provides content using the GraphQL query language, allowing more flexible and precise queries than the REST-based CDA.
Usage
Suitable for applications that need fine-grained control over the content they fetch, reducing over-fetching or under-fetching of data.
Access
Requires a Content Delivery API key.
Example Use Case
A React-based application uses GraphQL queries to fetch specific fields from Contentful for rendering a component.
Use this Endpoint with the Content Delivery API — access token
https://graphql.contentful.com/content/v1/spaces/xxxyyy/environments/master
Create a Postman POST request, authorize with the Bearer Token (CDN API Key), and use this Graphql Query in the Body tab, selecting “GraphQL”. Use your content record ID.
query pageBlogPostEntryQuery {
pageBlogPost(id: "your content record ID") {
featuredImage {
url
width
height
}
}
}Response JSON (Example)
{
"data": {
"pageBlogPost": {
"featuredImage": {
"url": "https://images.ctfassets.net/dlgtvh48u7by/2PMABWs4y9GH1QSkEn4NMY/cd680c85aa33239e7e2186e384ac6376/Azure_File_Upload.jpg",
"width": 1600,
"height": 900
}
}
}
}5. images.ctfassets.net (Image API)
Purpose
This endpoint is used to deliver and manipulate images stored in Contentful. It allows for image transformations such as resizing, cropping, and format conversion.
Usage
Used in production to deliver optimized images for different devices or screen sizes.
Example Use Case
A website uses this endpoint to fetch optimized, responsive images for faster loading times.
As you can see in the previous JSON response, Contentful uses this endpoint for image delivery and manipulation.
6. upload.contentful.com (Upload API)
Purpose
This is the Upload API endpoint used to upload large files (assets) to Contentful. Unlike the Content Management API, which handles all types of resources, the Upload API is specifically optimized for large asset uploads.
Usage
Commonly used in automation scripts or custom applications where large files need to be uploaded programmatically.
Access
Requires a Content Management API key.
Example Use Case
An application bulk uploads images or videos to be managed and published in Contentful
Conclusion:
preview.contentful.com
Used for previewing unpublished content.
api.contentful.com
Used for managing content and configurations.
cdn.contentful.com
Used for delivering published content quickly.
graphql.contentful.com
Used for delivering published content with flexible GraphQL queries.
images.ctfassets.net
For delivering and transforming images.
upload.contentful.com
For uploading large files as assets.
Each endpoint has a specific purpose and is optimized for different scenarios in the content management and delivery workflow.
Cloudapp-dev, and before you leave us
Thank you for reading until the end. Before you go:
