https://next-blog-takeshape.vercel.app/posts/learn-how-to-pre-render-pages-using-static-generation-with-nextjs

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>Learn How to Pre-render Pages Using Static Generation with Next.js | Next.js Blog Example with TakeShape</title><meta property="og:image" content="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"/><meta name="next-head-count" content="16"/><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/css/80627562801ee64d1d9a.css" as="style"/><link rel="stylesheet" href="/_next/static/css/80627562801ee64d1d9a.css"/><link rel="preload" href="/_next/static/KVaZlEMkLkmdIY2IASsXm/pages/posts/%5Bslug%5D.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"><h2 class="text-2xl md:text-4xl font-bold tracking-tight md:tracking-tighter leading-tight mb-20 mt-8"><a class="hover:underline" href="/">Blog</a>.</h2><article><h1 class="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tighter leading-tight md:leading-none mb-12 text-center md:text-left">Learn How to Pre-render Pages Using Static Generation with Next.js</h1><div class="hidden md:block md:mb-12"><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 class="mb-8 md:mb-16 -mx-5 sm:mx-0"><div class="-mx-5 sm:mx-0"><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"/></div></div><div class="max-w-2xl mx-auto"><div class="block md:hidden mb-6"><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 class="mb-6 text-lg"><time dateTime="2020-03-08T21:24:00.000Z">March	8, 2020</time></div></div><div class="max-w-2xl mx-auto"><div class="markdown-styles_markdown__1x9gM"><p>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>
2<h2>Lorem Ipsum</h2>
3<p>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>
4</div></div></article><hr class="border-accent-2 mt-28 mb-24"/><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;

4w=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></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">

4Statically 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>

4<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"preview":null,"post":{"title":"Learn How to Pre-render Pages Using Static Generation with Next.js","slug":"learn-how-to-pre-render-pages-using-static-generation-with-nextjs","content":"\u003cp\u003eLorem 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.\u003c/p\u003e\n\u003ch2\u003eLorem Ipsum\u003c/h2\u003e\n\u003cp\u003eLorem 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.\u003c/p\u003e\n","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"}}},"morePosts":[{"title":"Preview Mode for Static Generation","slug":"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"}}},{"title":"Dynamic Routing and Static Generation","slug":"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"}}}]},"__N_SSG":true},"page":"/posts/[slug]","query":{"slug":"learn-how-to-pre-render-pages-using-static-generation-with-nextjs"},"buildId":"KVaZlEMkLkmdIY2IASsXm","runtimeConfig":{},"nextExport":false,"isFallback":false,"gsp":true}</script>

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

4<script async="" data-next-page="/posts/[slug]" src="/_next/static/KVaZlEMkLkmdIY2IASsXm/pages/posts/%5Bslug%5D.js"></script>

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

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

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

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

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

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

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

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

4</body></html>