Skip to content

Commit bd727d6

Browse files
chloe-yangraphite-app[bot]raunofreibergskullface
authored
Revamp Next.js boilerplate (#81945)
## Overview This PR replaces the existing Next.js boilerplate with a new minimal design in light and dark themes. <img width="1512" height="856" alt="light" src="https://github.com/user-attachments/assets/542f1a8a-3ee1-466d-9446-e7cdb6ecf3b8" /> <img width="3024" height="1710" alt="dark" src="https://github.com/user-attachments/assets/afb89daa-8bcf-4173-9d47-b7fb2fad70bb" /> ## Testing 1. Run `pnpm build` at root 2. Enter the template directory (e.g. `cd packages/create-next-app/templates/app/ts`) then install its dependencies `pnpm i` 3. Run `pnpm next dev packages/create-next-app/templates/app/ts` at root 4. Open [localhost:3000](http://localhost:3000/) --------- Co-authored-by: graphite-app[bot] <96075541+graphite-app[bot]@users.noreply.github.com> Co-authored-by: rauno <[email protected]> Co-authored-by: skullface <[email protected]>
1 parent a4b96c8 commit bd727d6

File tree

16 files changed

+659
-1136
lines changed

16 files changed

+659
-1136
lines changed

‎apps/docs/app/page.tsx‎

Lines changed: 38 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,42 @@
11
import Image from 'next/image'
2-
import Link from 'next/link'
32

43
export default function Home() {
54
return (
6-
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
7-
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
5+
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black font-[family-name:var(--font-geist-sans)]">
6+
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
87
<Image
98
className="dark:invert"
109
src="/next.svg"
1110
alt="Next.js logo"
12-
width={180}
13-
height={38}
11+
width={100}
12+
height={20}
1413
priority
1514
/>
16-
<ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
17-
<li className="mb-2 tracking-[-.01em]">
18-
Get started by editing{' '}
19-
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
20-
app/page.tsx
21-
</code>
22-
.
23-
</li>
24-
<li className="tracking-[-.01em]">
25-
Save and see your changes instantly.
26-
</li>
27-
</ol>
28-
29-
<div className="flex gap-4 items-center flex-col sm:flex-row">
15+
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
16+
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
17+
To get started, edit the page.tsx file.
18+
</h1>
19+
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
20+
Looking for a starting point or more instructions? Head over to{' '}
21+
<a
22+
href="https://vercel.com/templates?framework=next.js"
23+
className="font-medium text-zinc-950 dark:text-zinc-50"
24+
>
25+
Template
26+
</a>{' '}
27+
or the{' '}
28+
<a
29+
href="https://nextjs.org/learn"
30+
className="font-medium text-zinc-950 dark:text-zinc-50"
31+
>
32+
Learning
33+
</a>{' '}
34+
center.
35+
</p>
36+
</div>
37+
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
3038
<a
31-
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
39+
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
3240
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
3341
target="_blank"
3442
rel="noopener noreferrer"
@@ -37,66 +45,21 @@ export default function Home() {
3745
className="dark:invert"
3846
src="/vercel.svg"
3947
alt="Vercel logomark"
40-
width={20}
41-
height={20}
48+
width={16}
49+
height={16}
4250
/>
43-
Deploy now
51+
Deploy Now
4452
</a>
45-
<Link
46-
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
47-
href="/docs"
53+
<a
54+
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
55+
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
56+
target="_blank"
57+
rel="noopener noreferrer"
4858
>
49-
Read our docs
50-
</Link>
59+
Documentation
60+
</a>
5161
</div>
5262
</main>
53-
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
54-
<a
55-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
56-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
57-
target="_blank"
58-
rel="noopener noreferrer"
59-
>
60-
<Image
61-
aria-hidden
62-
src="/file.svg"
63-
alt="File icon"
64-
width={16}
65-
height={16}
66-
/>
67-
Learn
68-
</a>
69-
<a
70-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
71-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
72-
target="_blank"
73-
rel="noopener noreferrer"
74-
>
75-
<Image
76-
aria-hidden
77-
src="/window.svg"
78-
alt="Window icon"
79-
width={16}
80-
height={16}
81-
/>
82-
Examples
83-
</a>
84-
<a
85-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
86-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
87-
target="_blank"
88-
rel="noopener noreferrer"
89-
>
90-
<Image
91-
aria-hidden
92-
src="/globe.svg"
93-
alt="Globe icon"
94-
width={16}
95-
height={16}
96-
/>
97-
Go to nextjs.org →
98-
</a>
99-
</footer>
10063
</div>
10164
)
10265
}

‎packages/create-next-app/templates/app-tw/js/app/page.js‎

Lines changed: 33 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,41 @@ import Image from "next/image";
22

33
export default function Home() {
44
return (
5-
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
6-
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
5+
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
6+
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
77
<Image
88
className="dark:invert"
99
src="/next.svg"
1010
alt="Next.js logo"
11-
width={180}
12-
height={38}
11+
width={100}
12+
height={20}
1313
priority
1414
/>
15-
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
16-
<li className="mb-2 tracking-[-.01em]">
17-
Get started by editing{" "}
18-
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
19-
app/page.js
20-
</code>
21-
.
22-
</li>
23-
<li className="tracking-[-.01em]">
24-
Save and see your changes instantly.
25-
</li>
26-
</ol>
27-
28-
<div className="flex gap-4 items-center flex-col sm:flex-row">
15+
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
16+
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
17+
To get started, edit the page.js file.
18+
</h1>
19+
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
20+
Looking for a starting point or more instructions? Head over to{" "}
21+
<a
22+
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
23+
className="font-medium text-zinc-950 dark:text-zinc-50"
24+
>
25+
Template
26+
</a>{" "}
27+
or the{" "}
28+
<a
29+
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
30+
className="font-medium text-zinc-950 dark:text-zinc-50"
31+
>
32+
Learning
33+
</a>{" "}
34+
center.
35+
</p>
36+
</div>
37+
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
2938
<a
30-
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
39+
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
3140
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
3241
target="_blank"
3342
rel="noopener noreferrer"
@@ -36,68 +45,21 @@ export default function Home() {
3645
className="dark:invert"
3746
src="/vercel.svg"
3847
alt="Vercel logomark"
39-
width={20}
40-
height={20}
48+
width={16}
49+
height={16}
4150
/>
42-
Deploy now
51+
Deploy Now
4352
</a>
4453
<a
45-
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
54+
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
4655
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
4756
target="_blank"
4857
rel="noopener noreferrer"
4958
>
50-
Read our docs
59+
Documentation
5160
</a>
5261
</div>
5362
</main>
54-
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
55-
<a
56-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
57-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
>
61-
<Image
62-
aria-hidden
63-
src="/file.svg"
64-
alt="File icon"
65-
width={16}
66-
height={16}
67-
/>
68-
Learn
69-
</a>
70-
<a
71-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
72-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
73-
target="_blank"
74-
rel="noopener noreferrer"
75-
>
76-
<Image
77-
aria-hidden
78-
src="/window.svg"
79-
alt="Window icon"
80-
width={16}
81-
height={16}
82-
/>
83-
Examples
84-
</a>
85-
<a
86-
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
87-
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
88-
target="_blank"
89-
rel="noopener noreferrer"
90-
>
91-
<Image
92-
aria-hidden
93-
src="/globe.svg"
94-
alt="Globe icon"
95-
width={16}
96-
height={16}
97-
/>
98-
Go to nextjs.org →
99-
</a>
100-
</footer>
10163
</div>
10264
);
10365
}

0 commit comments

Comments
 (0)