Skip to content

Commit 301d221

Browse files
author
Simone Gentili
committed
feat: add missing parallel route example
1 parent f515ecd commit 301d221

18 files changed

Lines changed: 4693 additions & 0 deletions

‎next.js/parallel-routes/.eslintrc.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"extends": "next/core-web-vitals"
3+
}

‎next.js/parallel-routes/.gitignore‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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/install-state.gz
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+
28+
# local env files
29+
.env*.local
30+
31+
# vercel
32+
.vercel
33+
34+
# typescript
35+
*.tsbuildinfo
36+
next-env.d.ts

‎next.js/parallel-routes/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2+
3+
## Getting Started
4+
5+
First, run the development server:
6+
7+
```bash
8+
npm run dev
9+
# or
10+
yarn dev
11+
# or
12+
pnpm dev
13+
# or
14+
bun dev
15+
```
16+
17+
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18+
19+
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
20+
21+
This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22+
23+
## Learn More
24+
25+
To learn more about Next.js, take a look at the following resources:
26+
27+
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28+
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29+
30+
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31+
32+
## Deploy on Vercel
33+
34+
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35+
36+
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

‎next.js/parallel-routes/app/favicon.ico‎

25.3 KB
Binary file not shown.

‎next.js/parallel-routes/app/globals.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.main-layout, .rotta-container {
2+
padding: 20px;
3+
border: #ccc 8px dashed;
4+
border-radius: 8px;
5+
}

‎next.js/parallel-routes/app/layout.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import "./globals.css";
2+
3+
export default function RootLayout({
4+
children,
5+
}: Readonly<{
6+
children: React.ReactNode;
7+
}>) {
8+
return (
9+
<html lang="en">
10+
<body>
11+
<h1>Layout principale</h1>
12+
<div className="main-layout">{children}</div>
13+
</body>
14+
</html>
15+
);
16+
}

‎next.js/parallel-routes/app/page.module.css‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
.main {
2+
display: flex;
3+
flex-direction: column;
4+
justify-content: space-between;
5+
align-items: center;
6+
padding: 6rem;
7+
min-height: 100vh;
8+
}
9+
10+
.description {
11+
display: inherit;
12+
justify-content: inherit;
13+
align-items: inherit;
14+
font-size: 0.85rem;
15+
max-width: var(--max-width);
16+
width: 100%;
17+
z-index: 2;
18+
font-family: var(--font-mono);
19+
}
20+
21+
.description a {
22+
display: flex;
23+
justify-content: center;
24+
align-items: center;
25+
gap: 0.5rem;
26+
}
27+
28+
.description p {
29+
position: relative;
30+
margin: 0;
31+
padding: 1rem;
32+
background-color: rgba(var(--callout-rgb), 0.5);
33+
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
34+
border-radius: var(--border-radius);
35+
}
36+
37+
.code {
38+
font-weight: 700;
39+
font-family: var(--font-mono);
40+
}
41+
42+
.grid {
43+
display: grid;
44+
grid-template-columns: repeat(4, minmax(25%, auto));
45+
max-width: 100%;
46+
width: var(--max-width);
47+
}
48+
49+
.card {
50+
padding: 1rem 1.2rem;
51+
border-radius: var(--border-radius);
52+
background: rgba(var(--card-rgb), 0);
53+
border: 1px solid rgba(var(--card-border-rgb), 0);
54+
transition: background 200ms, border 200ms;
55+
}
56+
57+
.card span {
58+
display: inline-block;
59+
transition: transform 200ms;
60+
}
61+
62+
.card h2 {
63+
font-weight: 600;
64+
margin-bottom: 0.7rem;
65+
}
66+
67+
.card p {
68+
margin: 0;
69+
opacity: 0.6;
70+
font-size: 0.9rem;
71+
line-height: 1.5;
72+
max-width: 30ch;
73+
text-wrap: balance;
74+
}
75+
76+
.center {
77+
display: flex;
78+
justify-content: center;
79+
align-items: center;
80+
position: relative;
81+
padding: 4rem 0;
82+
}
83+
84+
.center::before {
85+
background: var(--secondary-glow);
86+
border-radius: 50%;
87+
width: 480px;
88+
height: 360px;
89+
margin-left: -400px;
90+
}
91+
92+
.center::after {
93+
background: var(--primary-glow);
94+
width: 240px;
95+
height: 180px;
96+
z-index: -1;
97+
}
98+
99+
.center::before,
100+
.center::after {
101+
content: "";
102+
left: 50%;
103+
position: absolute;
104+
filter: blur(45px);
105+
transform: translateZ(0);
106+
}
107+
108+
.logo {
109+
position: relative;
110+
}
111+
/* Enable hover only on non-touch devices */
112+
@media (hover: hover) and (pointer: fine) {
113+
.card:hover {
114+
background: rgba(var(--card-rgb), 0.1);
115+
border: 1px solid rgba(var(--card-border-rgb), 0.15);
116+
}
117+
118+
.card:hover span {
119+
transform: translateX(4px);
120+
}
121+
}
122+
123+
@media (prefers-reduced-motion) {
124+
.card:hover span {
125+
transform: none;
126+
}
127+
}
128+
129+
/* Mobile */
130+
@media (max-width: 700px) {
131+
.content {
132+
padding: 4rem;
133+
}
134+
135+
.grid {
136+
grid-template-columns: 1fr;
137+
margin-bottom: 120px;
138+
max-width: 320px;
139+
text-align: center;
140+
}
141+
142+
.card {
143+
padding: 1rem 2.5rem;
144+
}
145+
146+
.card h2 {
147+
margin-bottom: 0.5rem;
148+
}
149+
150+
.center {
151+
padding: 8rem 0 6rem;
152+
}
153+
154+
.center::before {
155+
transform: none;
156+
height: 300px;
157+
}
158+
159+
.description {
160+
font-size: 0.8rem;
161+
}
162+
163+
.description a {
164+
padding: 1rem;
165+
}
166+
167+
.description p,
168+
.description div {
169+
display: flex;
170+
justify-content: center;
171+
position: fixed;
172+
width: 100%;
173+
}
174+
175+
.description p {
176+
align-items: center;
177+
inset: 0 0 auto;
178+
padding: 2rem 1rem 1.4rem;
179+
border-radius: 0;
180+
border: none;
181+
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
182+
background: linear-gradient(
183+
to bottom,
184+
rgba(var(--background-start-rgb), 1),
185+
rgba(var(--callout-rgb), 0.5)
186+
);
187+
background-clip: padding-box;
188+
backdrop-filter: blur(24px);
189+
}
190+
191+
.description div {
192+
align-items: flex-end;
193+
pointer-events: none;
194+
inset: auto 0 0;
195+
padding: 2rem;
196+
height: 200px;
197+
background: linear-gradient(
198+
to bottom,
199+
transparent 0%,
200+
rgb(var(--background-end-rgb)) 40%
201+
);
202+
z-index: 1;
203+
}
204+
}
205+
206+
/* Tablet and Smaller Desktop */
207+
@media (min-width: 701px) and (max-width: 1120px) {
208+
.grid {
209+
grid-template-columns: repeat(2, 50%);
210+
}
211+
}
212+
213+
@media (prefers-color-scheme: dark) {
214+
.vercelLogo {
215+
filter: invert(1);
216+
}
217+
218+
.logo {
219+
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
220+
}
221+
}
222+
223+
@keyframes rotate {
224+
from {
225+
transform: rotate(360deg);
226+
}
227+
to {
228+
transform: rotate(0deg);
229+
}
230+
}

‎next.js/parallel-routes/app/page.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import Link from "next/link";
2+
3+
export default function Home() {
4+
return (
5+
<div className="main-content">
6+
<Link href="/rotta">/rotta</Link>
7+
</div>
8+
);
9+
}

‎next.js/parallel-routes/app/rotta/@primo/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Slot() {
2+
return <>primo slot</>;
3+
}

‎next.js/parallel-routes/app/rotta/@secondo/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Slot() {
2+
return <>secondo slot</>;
3+
}

0 commit comments

Comments
 (0)