https://next-blog-takeshape.vercel.app/

1<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"/><link rel="manifest" href="/favicon/site.webmanifest"/><link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#000000"/><link rel="shortcut icon" href="/favicon/favicon.ico"/><meta name="msapplication-TileColor" content="#000000"/><meta name="msapplication-config" content="/favicon/browserconfig.xml"/><meta name="theme-color" content="#000"/><link rel="alternate" type="application/rss+xml" href="/feed.xml"/><meta name="description" content="A statically generated blog example using Next.js and TakeShape."/><meta property="og:image" content="https://og-image.now.sh/Next.js%20Blog%20Example%20with%20**TakeShape**.png?theme=light&amp;md=1&amp;fontSize=75px&amp;images=https%3A%2F%2Fassets.zeit.co%2Fimage%2Fupload%2Ffront%2Fassets%2Fdesign%2Fnextjs-black-logo.svg&amp;images=https%3A%2F%2Fwww.takeshape.io%2Fandroid-icon-192x192.png&amp;heights=200&amp;heights=200"/><title>Next.js Blog Example with TakeShape</title><meta name="next-head-count" content="15"/><link rel="preload" href="/_next/static/css/7a76865717e5a669b9f5.css" as="style"/><link rel="stylesheet" href="/_next/static/css/7a76865717e5a669b9f5.css"/><link rel="preload" href="/_next/static/KVaZlEMkLkmdIY2IASsXm/pages/index.js" as="script"/><link rel="preload" href="/_next/static/KVaZlEMkLkmdIY2IASsXm/pages/_app.js" as="script"/><link rel="preload" href="/_next/static/runtime/webpack-b65cab0b00afd201cbda.js" as="script"/><link rel="preload" href="/_next/static/chunks/framework.ad13eced0f07a9df2bbe.js" as="script"/><link rel="preload" href="/_next/static/chunks/commons.00bc458452f03791e387.js" as="script"/><link rel="preload" href="/_next/static/runtime/main-6bc3ec92e3b254f8e826.js" as="script"/><link rel="preload" href="/_next/static/chunks/a01d9e1288a902663a52fec4f746753bfd1f4f40.fd328e5da40aea04070c.js" as="script"/></head><body><div id="__next"><div class="min-h-screen"><div class="border-b bg-accent-1 border-accent-2"><div class="container mx-auto px-5"><div class="py-2 text-center text-sm">The source code for this blog is<!-- --> <a href="https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape" class="underline hover:text-success duration-200 transition-colors">available on GitHub</a>.</div></div></div><main><div class="container mx-auto px-5"><section class="flex-col md:flex-row flex items-center md:justify-between mt-16 mb-16 md:mb-12"><h1 class="text-6xl md:text-8xl font-bold tracking-tighter leading-tight md:pr-8">Blog.</h1><h4 class="text-center md:text-left text-lg mt-5 md:pl-8">A statically generated blog example using<!-- --> <a href="https://nextjs.org/" class="underline hover:text-success duration-200 transition-colors">Next.js</a> <!-- -->and<!-- --> <a href="https://www.takeshape.io/" class="underline hover:text-success duration-200 transition-colors">TakeShape</a>.</h4></section><section><div class="mb-8 md:mb-16"><div class="-mx-5 sm:mx-0"><a aria-label="Learn How to Pre-render Pages Using Static Generation with Next.js" href="/posts/learn-how-to-pre-render-pages-using-static-generation-with-nextjs"><img src="https://images.takeshape.io/117750e4-2fa8-4556-b475-95669cd3bfe5/dev/268fbeb8-17eb-4c30-82f5-5734d09f71c5/jj-ying-7JX0-bfiuxQ-unsplash.jpg?fit=crop&amp;fm=jpg&amp;h=1000&amp;w=2000" class="shadow-small hover:shadow-medium transition-shadow duration-200"/></a></div></div><div class="md:grid md:grid-cols-2 md:col-gap-16 lg:col-gap-8 mb-20 md:mb-28"><div><h3 class="mb-4 text-4xl lg:text-6xl leading-tight"><a class="hover:underline" href="/posts/learn-how-to-pre-render-pages-using-static-generation-with-nextjs">Learn How to Pre-render Pages Using Static Generation with Next.js</a></h3><div class="mb-4 md:mb-0 text-lg"><time dateTime="2020-03-08T21:24:00.000Z">March	8, 2020</time></div></div><div><p class="text-lg leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.</p><div class="flex items-center"><img src="https://images.takeshape.io/117750e4-2fa8-4556-b475-95669cd3bfe5/dev/8a303a35-e217-4900-8985-ed34870b9876/6324199.jpeg?fit=crop&amp;fm=jpg&amp;h=100&amp;sat=-100&amp;w=100" class="w-12 h-12 rounded-full mr-4" alt="Tim Neutkens"/><div class="text-xl font-bold">Tim Neutkens</div></div></div></div></section><section><h2 class="mb-8 text-6xl md:text-7xl font-bold tracking-tighter leading-tight">More Stories</h2><div class="grid grid-cols-1 md:grid-cols-2 md:col-gap-16 lg:col-gap-32 row-gap-20 md:row-gap-32 mb-32"><div><div class="mb-5"><div class="-mx-5 sm:mx-0"><a aria-label="Preview Mode for Static Generation" href="/posts/preview-mode-for-static-generation"><img src="https://images.takeshape.io/117750e4-2fa8-4556-b475-95669cd3bfe5/dev/ec538888-0507-41e5-8922-df3b0d00b58f/emile-seguin-R9OueKOtGGU-unsplash.jpg?fit=crop&amp;fm=jpg&amp;h=1000&amp;w=2000" class="shadow-small hover:shadow-medium transition-shadow duration-200"/></a></div></div><h3 class="text-3xl mb-3 leading-snug"><a class="hover:underline" href="/posts/preview-mode-for-static-generation">Preview Mode for Static Generation</a></h3><div class="text-lg mb-4"><time dateTime="2020-03-07T22:24:00.000Z">March	7, 2020</time></div><p class="text-lg leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.</p><div class="flex items-center"><img src="https://images.takeshape.io/117750e4-2fa8-4556-b475-95669cd3bfe5/dev/07f882e8-35a0-4e42-b14d-366d8b686a90/616428.jpeg?fit=crop&amp;fm=jpg&amp;h=100&amp;sat=-100&amp;

1w=100" class="w-12 h-12 rounded-full mr-4" alt="Joe Haddad"/><div class="text-xl font-bold">Joe Haddad</div></div></div><div><div class="mb-5"><div class="-mx-5 sm:mx-0"><a aria-label="Dynamic Routing and Static Generation" href="/posts/dynamic-routing-and-static-generation"><img src="https://images.takeshape.io/117750e4-2fa8-4556-b475-95669cd3bfe5/dev/65fa8513-1228-4e53-bde1-5df4bfce0bfb/henry-co-qJbWkfWXV_0-unsplash.jpg?fit=crop&amp;fm=jpg&amp;h=1000&amp;w=2000" class="shadow-small hover:shadow-medium transition-shadow duration-200"/></a></div></div><h3 class="text-3xl mb-3 leading-snug"><a class="hover:underline" href="/posts/dynamic-routing-and-static-generation">Dynamic Routing and Static Generation</a></h3><div class="text-lg mb-4"><time dateTime="2020-03-06T22:24:00.000Z">March	6, 2020</time></div><p class="text-lg leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.</p><div class="flex items-center"><img src="https://images.takeshape.io/117750e4-2fa8-4556-b475-95669cd3bfe5/dev/2718de5d-39c5-45d0-b190-2f40563b7088/22380829.png?fit=crop&amp;fm=jpg&amp;h=100&amp;sat=-100&amp;w=100" class="w-12 h-12 rounded-full mr-4" alt="JJ Kasper"/><div class="text-xl font-bold">JJ Kasper</div></div></div><div><div class="mb-5"><div class="-mx-5 sm:mx-0"><a aria-label="Deploying Next.js Apps" href="/posts/deploying-nextjs-apps"><img src="https://images.takeshape.io/117750e4-2fa8-4556-b475-95669cd3bfe5/dev/094a7e6d-2765-41e9-98f7-41c51b4dc8ab/oleg-laptev-7jQh3EiS8Bs-unsplash.jpg?fit=crop&amp;fm=jpg&amp;h=1000&amp;w=2000" class="shadow-small hover:shadow-medium transition-shadow duration-200"/></a></div></div><h3 class="text-3xl mb-3 leading-snug"><a class="hover:underline" href="/posts/deploying-nextjs-apps">Deploying Next.js Apps</a></h3><div class="text-lg mb-4"><time dateTime="2020-03-05T22:24:00.000Z">March	5, 2020</time></div><p class="text-lg leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.</p><div class="flex items-center"><img src="https://images.takeshape.io/117750e4-2fa8-4556-b475-95669cd3bfe5/dev/fe772d4a-d934-447c-a603-c0f7ee5c1de2/4278345.jpeg?fit=crop&amp;fm=jpg&amp;h=100&amp;sat=-100&amp;w=100" class="w-12 h-12 rounded-full mr-4" alt="Luis Alvarez"/><div class="text-xl font-bold">Luis Alvarez</div></div></div><div><div class="mb-5"><div class="-mx-5 sm:mx-0"><a aria-label="From Server-side Rendering to Static Generation" href="/posts/from-server-side-rendering-to-static-generation"><img src="https://images.takeshape.io/117750e4-2fa8-4556-b475-95669cd3bfe5/dev/858b6789-2812-40b5-a509-e0f4989f962d/hugo-barbosa-TnG2q8FtXsg-unsplash.jpg?fit=crop&amp;fm=jpg&amp;h=1000&amp;w=2000" class="shadow-small hover:shadow-medium transition-shadow duration-200"/></a></div></div><h3 class="text-3xl mb-3 leading-snug"><a class="hover:underline" href="/posts/from-server-side-rendering-to-static-generation">From Server-side Rendering to Static Generation</a></h3><div class="text-lg mb-4"><time dateTime="2020-03-04T22:24:00.000Z">March	4, 2020</time></div><p class="text-lg leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.</p><div class="flex items-center"><img src="https://images.takeshape.io/117750e4-2fa8-4556-b475-95669cd3bfe5/dev/a33f059a-49ec-4d8a-883e-0cc2a019f104/shu.jpeg?fit=crop&amp;fm=jpg&amp;h=100&amp;sat=-100&amp;w=100" class="w-12 h-12 rounded-full mr-4" alt="Shu Uesugi"/><div class="text-xl font-bold">Shu Uesugi</div></div></div></div></section></div></main></div><footer class="bg-accent-1 border-t border-accent-2"><div class="container mx-auto px-5"><div class="py-28 flex flex-col lg:flex-row items-center"><h3 class="text-4xl lg:text-5xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">

1Statically Generated with Next.js.</h3><div class="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2"><a href="https://nextjs.org/docs/basic-features/pages" class="mx-3 bg-black hover:bg-white hover:text-black border border-black text-white font-bold py-3 px-12 lg:px-8 duration-200 transition-colors mb-6 lg:mb-0">Read Documentation</a><a href="https://github.com/zeit/next.js/tree/canary/examples/cms-takeshape" class="mx-3 font-bold hover:underline">View on GitHub</a></div></div></div></footer></div>

1<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"allPosts":[{"slug":"learn-how-to-pre-render-pages-using-static-generation-with-nextjs","title":"Learn How to Pre-render Pages Using Static Generation with Next.js","excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.","date":"2020-03-08T21:24:00.000Z","coverImage":{"path":"117750e4-2fa8-4556-b475-95669cd3bfe5/dev/268fbeb8-17eb-4c30-82f5-5734d09f71c5/jj-ying-7JX0-bfiuxQ-unsplash.jpg"},"author":{"name":"Tim Neutkens","picture":{"path":"117750e4-2fa8-4556-b475-95669cd3bfe5/dev/8a303a35-e217-4900-8985-ed34870b9876/6324199.jpeg"}}},{"slug":"preview-mode-for-static-generation","title":"Preview Mode for Static Generation","excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.","date":"2020-03-07T22:24:00.000Z","coverImage":{"path":"117750e4-2fa8-4556-b475-95669cd3bfe5/dev/ec538888-0507-41e5-8922-df3b0d00b58f/emile-seguin-R9OueKOtGGU-unsplash.jpg"},"author":{"name":"Joe Haddad","picture":{"path":"117750e4-2fa8-4556-b475-95669cd3bfe5/dev/07f882e8-35a0-4e42-b14d-366d8b686a90/616428.jpeg"}}},{"slug":"dynamic-routing-and-static-generation","title":"Dynamic Routing and Static Generation","excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.","date":"2020-03-06T22:24:00.000Z","coverImage":{"path":"117750e4-2fa8-4556-b475-95669cd3bfe5/dev/65fa8513-1228-4e53-bde1-5df4bfce0bfb/henry-co-qJbWkfWXV_0-unsplash.jpg"},"author":{"name":"JJ Kasper","picture":{"path":"117750e4-2fa8-4556-b475-95669cd3bfe5/dev/2718de5d-39c5-45d0-b190-2f40563b7088/22380829.png"}}},{"slug":"deploying-nextjs-apps","title":"Deploying Next.js Apps","excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.","date":"2020-03-05T22:24:00.000Z","coverImage":{"path":"117750e4-2fa8-4556-b475-95669cd3bfe5/dev/094a7e6d-2765-41e9-98f7-41c51b4dc8ab/oleg-laptev-7jQh3EiS8Bs-unsplash.jpg"},"author":{"name":"Luis Alvarez","picture":{"path":"117750e4-2fa8-4556-b475-95669cd3bfe5/dev/fe772d4a-d934-447c-a603-c0f7ee5c1de2/4278345.jpeg"}}},{"slug":"from-server-side-rendering-to-static-generation","title":"From Server-side Rendering to Static Generation","excerpt":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilisi morbi tempus.","date":"2020-03-04T22:24:00.000Z","coverImage":{"path":"117750e4-2fa8-4556-b475-95669cd3bfe5/dev/858b6789-2812-40b5-a509-e0f4989f962d/hugo-barbosa-TnG2q8FtXsg-unsplash.jpg"},"author":{"name":"Shu Uesugi","picture":{"path":"117750e4-2fa8-4556-b475-95669cd3bfe5/dev/a33f059a-49ec-4d8a-883e-0cc2a019f104/shu.jpeg"}}}],"preview":null},"__N_SSG":true},"page":"/","query":{},"buildId":"KVaZlEMkLkmdIY2IASsXm","runtimeConfig":{},"nextExport":false,"isFallback":false,"gsp":true}</script>

1<script nomodule="" src="/_next/static/runtime/polyfills-934ee1c38f9bd83fb20d.js"></script>

1<script async="" data-next-page="/" src="/_next/static/KVaZlEMkLkmdIY2IASsXm/pages/index.js"></script>

1<script async="" data-next-page="/_app" src="/_next/static/KVaZlEMkLkmdIY2IASsXm/pages/_app.js"></script>

1<script src="/_next/static/runtime/webpack-b65cab0b00afd201cbda.js" async=""></script>

1<script src="/_next/static/chunks/framework.ad13eced0f07a9df2bbe.js" async=""></script>

1<script src="/_next/static/chunks/commons.00bc458452f03791e387.js" async=""></script>

1<script src="/_next/static/runtime/main-6bc3ec92e3b254f8e826.js" async=""></script>

1<script src="/_next/static/chunks/a01d9e1288a902663a52fec4f746753bfd1f4f40.fd328e5da40aea04070c.js" async=""></script>

1<script src="/_next/static/KVaZlEMkLkmdIY2IASsXm/_buildManifest.js" async=""></script>

1<script src="/_next/static/KVaZlEMkLkmdIY2IASsXm/_ssgManifest.js" async=""></script>

1</body></html>