Skip to content

Commit 156d9f1

Browse files
vicbvicb
authored
Import the next-partial-prerendering example (#308)
https://github.com/vercel-labs/next-partial-prerendering
1 parent 68c7d6d commit 156d9f1

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+1869
-34
lines changed

‎examples/next-partial-prerendering/.gitignore

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
/.yarn
8+
9+
# testing
10+
/coverage
11+
12+
# next.js
13+
/.next/
14+
/out/
15+
16+
# production
17+
/build
18+
19+
# misc
20+
.DS_Store
21+
*.pem
22+
23+
# debug
24+
npm-debug.log*
25+
yarn-debug.log*
26+
yarn-error.log*
27+
.pnpm-debug.log*
28+
29+
# local env files
30+
.env*
31+
!.env*.example
32+
33+
# vercel
34+
.vercel
35+
36+
# typescript
37+
*.tsbuildinfo

‎examples/next-partial-prerendering/.prettierrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"singleQuote": true
3+
}

‎examples/next-partial-prerendering/README.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
## Next.js Partial Prerendering
2+
3+
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).
4+
5+
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.
6+
7+
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.
8+
9+
> ⚠️ 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.
10+
11+
## How it works
12+
13+
The index route `/` uses Partial Prerendering through:
14+
15+
1. Enabling the experimental flag in `next.config.js`.
16+
17+
```js
18+
experimental: {
19+
ppr: true,
20+
},
21+
```
22+
23+
2. Using `<Suspense />` to wrap Dynamic content.

‎examples/next-partial-prerendering/app/favicon.ico

14.7 KB
Binary file not shown.

‎examples/next-partial-prerendering/app/layout.tsx

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { CartCountProvider } from '#/components/cart-count-context';
2+
import { Header } from '#/components/header';
3+
import { Sidebar } from '#/components/sidebar';
4+
import { Metadata } from 'next';
5+
import { GlobalStyles } from './styles';
6+
7+
export const metadata: Metadata = {
8+
metadataBase: new URL('https://partialprerendering.com'),
9+
title: 'Next.js Partial Prerendering',
10+
description: 'A demo of Next.js using Partial Prerendering.',
11+
openGraph: {
12+
title: 'Next.js Partial Prerendering',
13+
description: 'A demo of Next.js using Partial Prerendering.',
14+
},
15+
twitter: {
16+
card: 'summary_large_image',
17+
},
18+
};
19+
20+
export default function RootLayout({
21+
children,
22+
}: {
23+
children: React.ReactNode;
24+
}) {
25+
return (
26+
<html lang="en" className={`[color-scheme:dark]`}>
27+
<head>
28+
<GlobalStyles />
29+
</head>
30+
<body className="overflow-y-scroll bg-gray-1100 bg-[url('/grid.svg')] pb-36">
31+
<Sidebar />
32+
<div className="lg:pl-72">
33+
<div className="mx-auto max-w-4xl space-y-8 px-2 pt-20 lg:px-8 lg:py-8">
34+
<div className="rounded-lg bg-vc-border-gradient p-px shadow-lg shadow-black/20">
35+
<div className="rounded-lg bg-black p-3.5 lg:p-6">
36+
<CartCountProvider>
37+
<div className="space-y-10">
38+
<Header />
39+
40+
{children}
41+
</div>
42+
</CartCountProvider>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</body>
48+
</html>
49+
);
50+
}

‎examples/next-partial-prerendering/app/not-found.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export default function NotFound() {
2+
return (
3+
<div className="space-y-4 text-vercel-pink">
4+
<h2 className="text-lg font-bold">Not Found</h2>
5+
<p className="text-sm">Could not find requested resource</p>
6+
</div>
7+
);
8+
}

‎examples/next-partial-prerendering/app/opengraph-image.png

96.6 KB
Loading

‎examples/next-partial-prerendering/app/page.tsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { Suspense } from 'react';
2+
import {
3+
RecommendedProducts,
4+
RecommendedProductsSkeleton,
5+
} from '#/components/recommended-products';
6+
import { Reviews, ReviewsSkeleton } from '#/components/reviews';
7+
import { SingleProduct } from '#/components/single-product';
8+
import { Ping } from '#/components/ping';
9+
10+
export default function Page() {
11+
return (
12+
<div className="space-y-8 lg:space-y-14">
13+
<SingleProduct />
14+
15+
<Ping />
16+
17+
<Suspense fallback={<RecommendedProductsSkeleton />}>
18+
<RecommendedProducts />
19+
</Suspense>
20+
21+
<Ping />
22+
23+
<Suspense fallback={<ReviewsSkeleton />}>
24+
<Reviews />
25+
</Suspense>
26+
</div>
27+
);
28+
}

‎examples/next-partial-prerendering/app/styles.tsx

Lines changed: 13 additions & 0 deletions
Large diffs are not rendered by default.

‎examples/next-partial-prerendering/app/twitter-image.png

96.6 KB
Loading

0 commit comments

Comments
 (0)