Inhaltsverzeichnis
- 1. preview.contentful.com (Content Preview API)
- 2. api.contentful.com (Management API)
- Daten abrufen
- Daten anpassen
- 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)
- Schlussfolgerung:
- Cloudapp-dev und bevor Sie uns verlassen
Contentful ist ein großartiges Headless CMS, das sich leicht in neue oder bestehende Next.js 14-Projekte integrieren lässt. Ich verwende es häufig in meinen Webprojekten. Es gibt jedoch mehrere Möglichkeiten, Inhalte zu verwalten (Erstellen, Aktualisieren, Löschen und Bereitstellen von Inhalten). Lassen Sie uns einen tiefen Einblick in die REST-Fähigkeiten dieses CMS nehmen. Nachfolgend finden Sie eine Liste aller verfügbaren Endpunkte sowie einige Beispiele.
1. preview.contentful.com (Content Preview API)
Zweck Dies ist der Vorschau-API-Endpunkt für den Zugriff auf unveröffentlichte (Entwurfs-)Inhalte in Contentful. Er ist nützlich, um Änderungen an Inhalten zu sehen, bevor sie live gehen.
Verwendung Wird typischerweise in Entwicklungsumgebungen oder für die Vorschau von Inhalten in Content-Management-Systemen (CMS) verwendet.
Zugang Erfordert einen Vorschau-API-Schlüssel.
Beispiel für einen Anwendungsfall Ein Inhaltsredakteur möchte eine Vorschau der Änderungen an einem Blogbeitrag anzeigen, bevor er veröffentlicht wird.
Nehmen wir an, Sie haben einen Contentful-Space mit der ID „xxxyyy“ und arbeiten in der „Master“-Umgebung, und Sie haben einen Content-Datensatz mit der ID „3xwgduhyZmdUYieeiW5Pq2“, dann würde Ihre URL lauten:
https://preview.contentful.com/spaces/xxxyyy/environments/master/entries/3xwgduhyZmdUYieeiW5Pq2
Further information regarding the right use of Contentful Environments.
Sie können das Content Preview Token aus dem Contentful Backend erhalten, indem Sie oben rechts auf „Einstellungen“ und dann auf „API-Schlüssel“ klicken. Erstellen Sie einen neuen API-Schlüssel oder öffnen Sie den vorhandenen in der Benutzeroberfläche und scrollen Sie nach unten, bis Sie ihn sehen. Erstellen Sie nun eine GET-Anfrage in Postman und verwenden Sie die richtige URL. Legen Sie in der Registerkarte „Autorisierung“ das Vorschautoken als Träger-Token fest und klicken Sie auf „Senden“, um die „Vorschauversion“ Ihres Inhaltsdatensatzes zu erhalten.
{
"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"
}
}
}Wie Sie im JSON sehen können, ist der Typ des Inhaltseintrags „PageBlogPost“. Nachfolgend die verschiedenen Felder, die im Contenttype verwendet werden.
2. api.contentful.com (Management API)
Zweck Dies ist der Endpunkt der Content Management API, der für die Verwaltung von Inhalten und anderen Ressourcen in einem Contentful-Bereich verwendet wird. Er bietet CRUD-Operationen (Erstellen, Lesen, Aktualisieren, Löschen) für Einträge, Assets, Inhaltstypen, Umgebungen usw.
Verwendung Wird von Entwicklern verwendet, um Aufgaben wie die Erstellung von Inhaltstypen, die programmatische Aktualisierung von Einträgen oder die Verwaltung von Umgebungseinstellungen zu automatisieren.
Zugang Erfordert einen Content Management API-Schlüssel.
Beispiel für einen Anwendungsfall Ein Entwickler schreibt ein Skript, um Inhalte von einer Umgebung in eine andere zu migrieren.
Erstellen wir einen neuen Inhaltsdatensatz vom Typ „pageBlogPost“. Die URL könnte lauten:
https://api.contentful.com/spaces/xxxyyy/environments/master/entries
Holen Sie sich das CMA-Token aus dem Abschnitt „CMA-Token“ unter Einstellungen in Ihrem Contentful-Konto und verwenden Sie es erneut als Bearer-Token in Ihrer Postman-POST-Anfrage. Fügen Sie die Header „X-Contentful-Content-Type“ -> pageBlogPost (oder jeden von Ihnen erstellten Inhaltstyp) und „Content-Type“ -> application/vnd.contentful.management.v1+json hinzu.
Wählen Sie „raw“ für die Registerkarte „body“ und verwenden Sie dieses Beispiel 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": {}
}
}
}
}Wie Sie sehen können, verwende ich zwei Sprachen: Deutsch (DE) und Englisch (EN). Wenn die Erstellung erfolgreich war, erhalten Sie eine Meldung „201 Created“ und Sie können Ihren Datensatz im Contentful Backend sehen.
Daten abrufen
können Sie die zuvor erstellten JSON-Daten des Inhaltsdatensatzes abrufen.
Daten anpassen
Lassen Sie uns eine PUT-Anfrage vorbereiten ->
https://api.contentful.com/spaces/xxxyyy/environments/master/entries/3xwgduhyZmdUYieeiW5Pq2
und den Header „X-Contentful-Version“, um die Version für die Änderung anzugeben. Sie können die Version aus dem JSON der vorherigen GET-Anfrage ablesen („publishedVersion“: 3, „publishedAt“: „2024-09-09T15:21:08.978Z“,)
3. cdn.contentful.com (Content Delivery API)
Zweck Dies ist der Endpunkt der Content Delivery API (CDA), der für die Bereitstellung veröffentlichter Inhalte verwendet wird. Er wird von einem Content Delivery Network (CDN) unterstützt, das einen effizienten und schnellen Zugriff auf Inhalte ermöglicht.
Verwendung Wird üblicherweise in Produktionsumgebungen verwendet, um veröffentlichte Inhalte für Websites oder Anwendungen abzurufen.
Zugang Erfordert einen Content Delivery API-Schlüssel.
Beispiel für einen Anwendungsfall Eine Website oder mobile Anwendung ruft Live-Inhalte ab und zeigt sie den Benutzern an.
Holen Sie sich das Content Delivery API - Zugriffstoken aus Ihrem Konto unter Einstellungen / API-Schlüssel
Dieser Aufruf nutzt das schnelle Contentful CDN und liefert Ihnen eine Liste von 10 Content Records (Typ -> pageBlogPost)
4. graphql.contentful.com (GraphQL Content Delivery API)
Zweck Dies ist der GraphQL-Content-Delivery-API-Endpunkt, der Inhalte unter Verwendung der GraphQL-Abfragesprache bereitstellt, die flexiblere und präzisere Abfragen ermöglicht als der REST-basierte CDA.
Verwendung Geeignet für Anwendungen, die eine feinkörnige Kontrolle über die abgerufenen Inhalte benötigen, um ein Über- oder Unterabrufen von Daten zu vermeiden.
Zugang Erfordert einen Content Delivery API-Schlüssel.
Beispiel für einen Anwendungsfall Eine React-basierte Anwendung verwendet GraphQL-Abfragen, um bestimmte Felder von Contentful für das Rendering einer Komponente abzurufen.
Verwenden Sie diesen Endpunkt mit der Content Delivery API - Zugriffstoken
https://graphql.contentful.com/content/v1/spaces/xxxyyy/environments/master
Erstellen Sie eine Postman-POST-Anfrage, autorisieren Sie sich mit dem Bearer Token (CDN-API-Schlüssel) und verwenden Sie diese Graphql-Abfrage auf der Registerkarte Body, indem Sie „GraphQL“ auswählen. Verwenden Sie Ihre Content Record ID.
query pageBlogPostEntryQuery {
pageBlogPost(id: "your content record ID") {
featuredImage {
url
width
height
}
}
}Antwort JSON (Beispiel)
{
"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)
Zweck Dieser Endpunkt wird verwendet, um in Contentful gespeicherte Bilder zu liefern und zu bearbeiten. Er ermöglicht Bildtransformationen wie Größenänderung, Zuschneiden und Formatkonvertierung.
Verwendung Wird in der Produktion verwendet, um optimierte Bilder für verschiedene Geräte oder Bildschirmgrößen zu liefern.
Beispiel für einen Anwendungsfall Eine Website verwendet diesen Endpunkt, um optimierte, reaktionsfähige Bilder für schnellere Ladezeiten abzurufen.
Wie Sie in der vorherigen JSON-Antwort sehen können, verwendet Contentful diesen Endpunkt für die Bereitstellung und Bearbeitung von Bildern.
6. upload.contentful.com (Upload API)
Zweck Dies ist der Endpunkt der Upload-API, der zum Hochladen großer Dateien (Assets) in Contentful verwendet wird. Im Gegensatz zur Content Management API, die alle Arten von Ressourcen handhabt, ist die Upload API speziell für den Upload von großen Assets optimiert.
Verwendung Wird häufig in Automatisierungsskripten oder benutzerdefinierten Anwendungen verwendet, bei denen große Dateien programmatisch hochgeladen werden müssen.
Zugang: Erfordert einen Content Management API-Schlüssel.
Beispiel für einen Anwendungsfall Eine Anwendung lädt massenhaft Bilder oder Videos hoch, die in Contentful verwaltet und veröffentlicht werden sollen.
Schlussfolgerung:
preview.contentful.com Dient der Vorschau von unveröffentlichten Inhalten. api.contentful.com Dient zur Verwaltung von Inhalten und Konfigurationen. cdn.contentful.com Für die schnelle Bereitstellung von veröffentlichten Inhalten. graphql.contentful.com Für die Bereitstellung von veröffentlichten Inhalten mit flexiblen GraphQL-Abfragen. images.ctfassets.net Für die Auslieferung und Umwandlung von Bildern. upload.contentful.com Für das Hochladen großer Dateien als Assets.
Jeder Endpunkt hat einen bestimmten Zweck und ist für verschiedene Szenarien im Content-Management- und Bereitstellungs-Workflow optimiert.
Cloudapp-dev und bevor Sie uns verlassen
Danke, dass Sie bis zum Ende gelesen haben. Noch eine Bitte bevor Sie gehen:
