New Blazing Fast AMP News Site with Drupal & NextJS

<p><span class="drop-cap">T</span>his weekend we went live with "Información Periodística" (IP<a href="https://ip.digital"> https://ip.digital</a>) the website for a new <strong>Breaking News </strong>TV channel in Argentina that started transmitting this Saturday. The site was built in a little over two months and is still an MVP but it already shows a lot of potential. </p> <p>The client is <a href="https://octubre.com/">Grupo Octubre</a>, one of Argentina's largest media groups and the effort was led by <a href="https://twitter.com/blejman">Mariano Blejman</a>, their chief digital officer. Mariano had a very clear view of the product he wanted: a mobile-first site with engaging short videos covering the breaking news and longer reports on different topics. The site is targeted at a younger audience and wants to provide a continuous feed of bitesize content for its viewers.</p> <ul> <li>Full <strong>AMP</strong> website (<a href="https://amp.dev">https://amp.dev</a>)</li> <li>Continuous scrolling feed.</li> <li>Video-based Posts.</li> <li>Live Streaming Video.</li> </ul> <p>The client wanted a website that is engaging and allows users to quickly find interesting stories in the form of short videos and an accompanying text. The site is mobile-first and the client wants to recreate the experience of using a site like Instagram: a continuous stream of articles to engage the user. The use of AMP allows for an excellent user experience and great SEO performance since Google gives a special place to <strong>AMP sites</strong> in search results allowing more exposure to visitors and making it easier to grow with search traffic.</p> <p> </p> <img alt="IP Showcase" data-entity-type="file" data-entity-uuid="8c3e7541-7a7c-481a-9e9e-c872d583ed8a" src="/sites/default/files/inline-images/ip-showcase_1.png" class="align-center" width="2591" height="1471" loading="lazy" /> <p> </p> <p>For this project, we chose an awesome technology stack that allows the client to easily scale in the upcoming months as they grow their audience. For the backend, we chose<a href="https://drupal.org"> Drupal 8</a> which is a rock solid <strong>CMS</strong> with a lot of great features like editorial workflows, media library, and a plethora of other great modules that enhance the editorial experience. For the frontend, we chose to <strong>decouple Drupal</strong> and use<a href="https://nextjs.org/"> NextJS</a>.  This has several advantages: NextJS has great AMP support, is blazing fast if you use hybrid static &amp; server side rendering and a great developer experience with all the tools available for Javascript development. The infrastructure is hosted in<a href="https://pantheon.io/"> Pantheon</a>,<a href="https://vercel.com"> Vercel</a>, and<a href="https://jwplayer.com"> JWPlayer</a> for the video content. Stay tuned for an upcoming blog post diving a little into the details by our lead developer <strong>Guillermo Recalde</strong>.</p> <p> </p> <div data-oembed-url="https://youtu.be/KfYXs5ldS_A"> <div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" src="https://www.youtube.com/embed/KfYXs5ldS_A?rel=0" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" tabindex="-1"></iframe></div> </div> <p> </p> <p>We still have a lot of work ahead of us: improve the editorial experience so that the staff can quickly and easily change the home page layout and add a lot of key features but we are confident that with the solid foundation we have we'll be able to push the site forward.</p> <p> </p> <center><h3>NEED A RELIABLE WEBSITE?   <a href="https://app.hubspot.com/meetings/lucas128/30" target="_blank"><button type="button">Book a Meeting</button></a></h3></center> <p> </p> <p> </p>