{"id":1244,"date":"2024-11-18T09:54:04","date_gmt":"2024-11-18T09:54:04","guid":{"rendered":"https:\/\/holzmayer.dev\/?post_type=case_study_or_projec&#038;p=1244"},"modified":"2024-11-25T15:24:33","modified_gmt":"2024-11-25T15:24:33","slug":"umsetzung-einer-website-inkl-page-transition-mit-next-js","status":"publish","type":"case_study","link":"https:\/\/holzmayer.dev\/en\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/","title":{"rendered":"Implementation of a Website incl. Page Transition Next.js"},"featured_media":1382,"template":"","class_list":["post-1244","case_study","type-case_study","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Umsetzung einer Website inkl. Page Transition mit Next.js - Holzmayer<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/holzmayer.dev\/en\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Umsetzung einer Website inkl. Page Transition mit Next.js - Holzmayer\" \/>\n<meta property=\"og:url\" content=\"https:\/\/holzmayer.dev\/en\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Holzmayer\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-25T15:24:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/11\/NextJS-Page-Transition.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1080\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/\",\"url\":\"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/\",\"name\":\"Umsetzung einer Website inkl. Page Transition mit Next.js - Holzmayer\",\"isPartOf\":{\"@id\":\"https:\/\/holzmayer.dev\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/11\/NextJS-Page-Transition.jpg\",\"datePublished\":\"2024-11-18T09:54:04+00:00\",\"dateModified\":\"2024-11-25T15:24:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/#primaryimage\",\"url\":\"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/11\/NextJS-Page-Transition.jpg\",\"contentUrl\":\"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/11\/NextJS-Page-Transition.jpg\",\"width\":1080,\"height\":1080},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/holzmayer.dev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Case Studies\",\"item\":\"https:\/\/holzmayer.dev\/case-studies\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Umsetzung einer Website inkl. Page Transition mit Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/holzmayer.dev\/#website\",\"url\":\"https:\/\/holzmayer.dev\/\",\"name\":\"Julian Holzmayer\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/holzmayer.dev\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/holzmayer.dev\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/holzmayer.dev\/#organization\",\"name\":\"Julian Holzmayer\",\"url\":\"https:\/\/holzmayer.dev\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/holzmayer.dev\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/09\/JULIAN-HOLZMAYER-400-x-150-px.png\",\"contentUrl\":\"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/09\/JULIAN-HOLZMAYER-400-x-150-px.png\",\"width\":325,\"height\":150,\"caption\":\"Julian Holzmayer\"},\"image\":{\"@id\":\"https:\/\/holzmayer.dev\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Umsetzung einer Website inkl. Page Transition mit Next.js - Holzmayer","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/holzmayer.dev\/en\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/","og_locale":"en_US","og_type":"article","og_title":"Umsetzung einer Website inkl. Page Transition mit Next.js - Holzmayer","og_url":"https:\/\/holzmayer.dev\/en\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/","og_site_name":"Holzmayer","article_modified_time":"2024-11-25T15:24:33+00:00","og_image":[{"width":1080,"height":1080,"url":"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/11\/NextJS-Page-Transition.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/","url":"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/","name":"Umsetzung einer Website inkl. Page Transition mit Next.js - Holzmayer","isPartOf":{"@id":"https:\/\/holzmayer.dev\/#website"},"primaryImageOfPage":{"@id":"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/#primaryimage"},"image":{"@id":"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/#primaryimage"},"thumbnailUrl":"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/11\/NextJS-Page-Transition.jpg","datePublished":"2024-11-18T09:54:04+00:00","dateModified":"2024-11-25T15:24:33+00:00","breadcrumb":{"@id":"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/#primaryimage","url":"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/11\/NextJS-Page-Transition.jpg","contentUrl":"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/11\/NextJS-Page-Transition.jpg","width":1080,"height":1080},{"@type":"BreadcrumbList","@id":"https:\/\/holzmayer.dev\/case-study\/umsetzung-einer-website-inkl-page-transition-mit-next-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/holzmayer.dev\/"},{"@type":"ListItem","position":2,"name":"Case Studies","item":"https:\/\/holzmayer.dev\/case-studies\/"},{"@type":"ListItem","position":3,"name":"Umsetzung einer Website inkl. Page Transition mit Next.js"}]},{"@type":"WebSite","@id":"https:\/\/holzmayer.dev\/#website","url":"https:\/\/holzmayer.dev\/","name":"Julian Holzmayer","description":"","publisher":{"@id":"https:\/\/holzmayer.dev\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/holzmayer.dev\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/holzmayer.dev\/#organization","name":"Julian Holzmayer","url":"https:\/\/holzmayer.dev\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/holzmayer.dev\/#\/schema\/logo\/image\/","url":"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/09\/JULIAN-HOLZMAYER-400-x-150-px.png","contentUrl":"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/09\/JULIAN-HOLZMAYER-400-x-150-px.png","width":325,"height":150,"caption":"Julian Holzmayer"},"image":{"@id":"https:\/\/holzmayer.dev\/#\/schema\/logo\/image\/"}}]}},"customer":"Anonym","overview":"<p data-pm-slice=\"1 1 []\">Im Rahmen eines anspruchsvollen Projekts habe ich eine komplexe Page Transition mithilfe von Next.js und Framer Motion implementiert. Das gesamte Frontend der Website wurde von mir umgesetzt, basierend auf den Vorgaben einer Adobe XD-Designvorlage und mit TailwindCSS pixelgenau realisiert.<\/p>","used_technologies":["Next.js","TailwindCSS","Framer Motion","Jira","Git","GraphQL"],"challanges":"<p data-pm-slice=\"1 1 []\">Die gr\u00f6\u00dfte Herausforderung bestand in der Umsetzung der Page Transition, da diese ein hohes Ma\u00df an Detailgenauigkeit und eine reibungslose Integration in die bestehende Architektur der Website erforderte. Zudem musste sichergestellt werden, dass das CMS-System mit GraphQL sauber angebunden ist, um die Projektinhalte des Unternehmens dynamisch im Frontend anzuzeigen.<\/p>","image_gallery":[{"ID":"1382","post_author":"1","post_date":"2024-11-25 15:24:26","post_date_gmt":"2024-11-25 15:24:26","post_content":"","post_title":"NextJS Page Transition","post_excerpt":"","post_status":"inherit","comment_status":"open","ping_status":"closed","post_password":"","post_name":"nextjs-page-transition","to_ping":"","pinged":"","post_modified":"2024-11-25 15:24:26","post_modified_gmt":"2024-11-25 15:24:26","post_content_filtered":"","post_parent":"1244","guid":"https:\/\/holzmayer.dev\/wp-content\/uploads\/2024\/11\/NextJS-Page-Transition.jpg","menu_order":"0","post_type":"attachment","post_mime_type":"image\/jpeg","comment_count":"0","pod_item_id":"1382"}],"solution":"<ul data-spread=\"false\" data-pm-slice=\"3 3 []\">\r\n \t<li><strong>Page Transition<\/strong>: Die Animationen wurden mit Framer Motion erstellt und sorgf\u00e4ltig in die Next.js-Anwendung integriert, um fl\u00fcssige \u00dcberg\u00e4nge zwischen den Seiten zu gew\u00e4hrleisten.<\/li>\r\n \t<li><strong>Pixelgenaue Umsetzung<\/strong>: Mithilfe von TailwindCSS wurde das Design exakt nach den Spezifikationen aus Adobe XD umgesetzt, um eine nahtlose Benutzererfahrung sicherzustellen.<\/li>\r\n \t<li><strong>CMS-Integration<\/strong>: Ein CMS-System wurde mit GraphQL angebunden, um die Projektinhalte dynamisch und effizient bereitzustellen.<\/li>\r\n \t<li><strong>Projektmanagement und Versionskontrolle<\/strong>: W\u00e4hrend des Projekts habe ich mit Jira zur Aufgabenverwaltung (Tickets) und Git zur Versionskontrolle gearbeitet.<\/li>\r\n<\/ul>","result":"<p data-pm-slice=\"1 1 []\">Das Ergebnis war eine interaktive und optisch ansprechende Website, die durch nahtlose Animationen und eine pr\u00e4zise Umsetzung \u00fcberzeugte.<\/p>\r\n<p data-pm-slice=\"1 1 []\">Aufgrund einer NDA-Vereinbarung darf das Projekt jedoch nicht \u00f6ffentlich gezeigt werden.<\/p>","_links":{"self":[{"href":"https:\/\/holzmayer.dev\/en\/wp-json\/wp\/v2\/case_study\/1244","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/holzmayer.dev\/en\/wp-json\/wp\/v2\/case_study"}],"about":[{"href":"https:\/\/holzmayer.dev\/en\/wp-json\/wp\/v2\/types\/case_study"}],"version-history":[{"count":1,"href":"https:\/\/holzmayer.dev\/en\/wp-json\/wp\/v2\/case_study\/1244\/revisions"}],"predecessor-version":[{"id":1383,"href":"https:\/\/holzmayer.dev\/en\/wp-json\/wp\/v2\/case_study\/1244\/revisions\/1383"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/holzmayer.dev\/en\/wp-json\/wp\/v2\/media\/1382"}],"wp:attachment":[{"href":"https:\/\/holzmayer.dev\/en\/wp-json\/wp\/v2\/media?parent=1244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}