diff --git a/examples/next-partial-prerendering/.gitignore b/examples/next-partial-prerendering/.gitignore new file mode 100755 index 00000000..6d1ed289 --- /dev/null +++ b/examples/next-partial-prerendering/.gitignore @@ -0,0 +1,37 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +/.yarn + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env* +!.env*.example + +# vercel +.vercel + +# typescript +*.tsbuildinfo diff --git a/examples/next-partial-prerendering/.prettierrc b/examples/next-partial-prerendering/.prettierrc new file mode 100644 index 00000000..544138be --- /dev/null +++ b/examples/next-partial-prerendering/.prettierrc @@ -0,0 +1,3 @@ +{ + "singleQuote": true +} diff --git a/examples/next-partial-prerendering/README.md b/examples/next-partial-prerendering/README.md new file mode 100755 index 00000000..967c9811 --- /dev/null +++ b/examples/next-partial-prerendering/README.md @@ -0,0 +1,23 @@ +## Next.js Partial Prerendering + +This is a demo of [Next.js](https://nextjs.org) using [Partial Prerendering](https://nextjs.org/docs/app/api-reference/next-config-js/partial-prerendering). + +This template uses the new Next.js [App Router](https://nextjs.org/docs/app). This includes support for enhanced layouts, colocation of components, tests, and styles, component-level data fetching, and more. + +It also uses the experimental Partial Prerendering feature available in Next.js 14. Partial Prerendering combines ultra-quick static edge delivery with fully dynamic capabilities and we believe it has the potential to [become the default rendering model for web applications](https://vercel.com/blog/partial-prerendering-with-next-js-creating-a-new-default-rendering-model), bringing together the best of static site generation and dynamic delivery. + +> ⚠️ Please note that PPR is an experimental technology that is not recommended for production. You may run into some DX issues, especially on larger code bases. + +## How it works + +The index route `/` uses Partial Prerendering through: + +1. Enabling the experimental flag in `next.config.js`. + +```js +experimental: { + ppr: true, +}, +``` + +2. Using `` to wrap Dynamic content. diff --git a/examples/next-partial-prerendering/app/favicon.ico b/examples/next-partial-prerendering/app/favicon.ico new file mode 100644 index 00000000..af984505 Binary files /dev/null and b/examples/next-partial-prerendering/app/favicon.ico differ diff --git a/examples/next-partial-prerendering/app/layout.tsx b/examples/next-partial-prerendering/app/layout.tsx new file mode 100644 index 00000000..799e4280 --- /dev/null +++ b/examples/next-partial-prerendering/app/layout.tsx @@ -0,0 +1,50 @@ +import { CartCountProvider } from '#/components/cart-count-context'; +import { Header } from '#/components/header'; +import { Sidebar } from '#/components/sidebar'; +import { Metadata } from 'next'; +import { GlobalStyles } from './styles'; + +export const metadata: Metadata = { + metadataBase: new URL('https://partialprerendering.com'), + title: 'Next.js Partial Prerendering', + description: 'A demo of Next.js using Partial Prerendering.', + openGraph: { + title: 'Next.js Partial Prerendering', + description: 'A demo of Next.js using Partial Prerendering.', + }, + twitter: { + card: 'summary_large_image', + }, +}; + +export default function RootLayout({ + children, +}: { + children: React.ReactNode; +}) { + return ( + + + + + + +
+
+
+
+ +
+
+ + {children} +
+ +
+
+
+
+ + + ); +} diff --git a/examples/next-partial-prerendering/app/not-found.tsx b/examples/next-partial-prerendering/app/not-found.tsx new file mode 100644 index 00000000..2ad82307 --- /dev/null +++ b/examples/next-partial-prerendering/app/not-found.tsx @@ -0,0 +1,8 @@ +export default function NotFound() { + return ( +
+

Not Found

+

Could not find requested resource

+
+ ); +} diff --git a/examples/next-partial-prerendering/app/opengraph-image.png b/examples/next-partial-prerendering/app/opengraph-image.png new file mode 100644 index 00000000..44fd1ebe Binary files /dev/null and b/examples/next-partial-prerendering/app/opengraph-image.png differ diff --git a/examples/next-partial-prerendering/app/page.tsx b/examples/next-partial-prerendering/app/page.tsx new file mode 100644 index 00000000..51cfd57a --- /dev/null +++ b/examples/next-partial-prerendering/app/page.tsx @@ -0,0 +1,28 @@ +import { Suspense } from 'react'; +import { + RecommendedProducts, + RecommendedProductsSkeleton, +} from '#/components/recommended-products'; +import { Reviews, ReviewsSkeleton } from '#/components/reviews'; +import { SingleProduct } from '#/components/single-product'; +import { Ping } from '#/components/ping'; + +export default function Page() { + return ( +
+ + + + + }> + + + + + + }> + + +
+ ); +} diff --git a/examples/next-partial-prerendering/app/styles.tsx b/examples/next-partial-prerendering/app/styles.tsx new file mode 100644 index 00000000..8d7fcb99 --- /dev/null +++ b/examples/next-partial-prerendering/app/styles.tsx @@ -0,0 +1,13 @@ +export function GlobalStyles() { + return ( +