-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Microfrontends] Update the Multi-Zones example with latest practices (…
…#958) ### Description This PR updates the `solutions/microfrontends` example with some more recent practices: - Converts both applications to use App Router - Uses `assetPrefix` instead of `basePath` - Updates to most recent versions of dependencies (Next, React, Turbo) - Uses Speculation Rules for prefetching/prerendering ### Demo URL <!-- Provide a URL to a live deployment where we can test your PR. If a demo isn't possible feel free to omit this section. --> ### Type of Change - [ ] New Example - [ ] Example updates (Bug fixes, new features, etc.) - [ ] Other (changes to the codebase, but not to examples) ### New Example Checklist - [ ] 🛫 `npm run new-example` was used to create the example - [ ] 📚 The template wasn't used but I carefuly read the [Adding a new example](https://github.com/vercel/examples#adding-a-new-example) steps and implemented them in the example - [ ] 📱 Is it responsive? Are mobile and tablets considered?
- Loading branch information
Showing
41 changed files
with
7,909 additions
and
6,561 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { PrefetchCrossZoneLinks } from '@acme/components/prefetch' | ||
| import { Layout } from '@vercel/examples-ui' | ||
| import '@vercel/examples-ui/globals.css' | ||
|
|
||
| export default function RootLayout({ | ||
| children, | ||
| }: Readonly<{ | ||
| children: React.ReactNode | ||
| }>) { | ||
| return ( | ||
| <html> | ||
| <body> | ||
| <Layout title="Microfrontends" path="solutions/microfrontends"> | ||
| {children} | ||
| </Layout> | ||
| <PrefetchCrossZoneLinks hrefs={['/', '/about']} /> | ||
| </body> | ||
| </html> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,18 @@ | ||
| module.exports = { | ||
| basePath: '/docs', | ||
| /** @type {import('next').NextConfig} */ | ||
| const nextConfig = { | ||
| assetPrefix: '/docs-static', | ||
| async rewrites() { | ||
| return { | ||
| beforeFiles: [ | ||
| // This rewrite is necessary to support assetPrefix only in Next 14 and below. | ||
| // It is not necessary in Next 15. | ||
| { | ||
| source: '/docs-static/_next/:path*', | ||
| destination: '/_next/:path*', | ||
| }, | ||
| ], | ||
| } | ||
| }, | ||
| } | ||
|
|
||
| module.exports = nextConfig |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,9 @@ | ||
| { | ||
| "ignoreCommand": "pnpm dlx turbo-ignore" | ||
| } | ||
| "buildCommand": "pnpm --workspace-root exec turbo --no-daemon --filter docs build --env-mode loose", | ||
| "installCommand": "node -v && pnpm --workspace-root --filter docs... install --config.dedupe-peer-dependents=false", | ||
| "build": { | ||
| "env": { | ||
| "ENABLE_EXPERIMENTAL_COREPACK": "1" | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
solutions/microfrontends/apps/main/app/components/colored-button.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| 'use client' | ||
|
|
||
| import { useState, useEffect } from 'react' | ||
| import { Button, Quote } from '@acme/design-system' | ||
| import { matchingTextColor, randomColor } from '@acme/utils' | ||
|
|
||
| export function ColoredButton() { | ||
| const [bgColor, setBgColor] = useState('') | ||
| const [textColor, setTextColor] = useState('') | ||
| const changeColor = () => { | ||
| const bg = randomColor() | ||
| setBgColor(bg) | ||
| setTextColor(matchingTextColor(bg)) | ||
| } | ||
|
|
||
| useEffect(changeColor, []) | ||
|
|
||
| return ( | ||
| <> | ||
| {bgColor && textColor && ( | ||
| <> | ||
| <Button | ||
| className="mb-4" | ||
| style={{ | ||
| backgroundColor: bgColor, | ||
| color: textColor, | ||
| borderColor: textColor, | ||
| }} | ||
| onClick={changeColor} | ||
| > | ||
| Change Color | ||
| </Button> | ||
| </> | ||
| )} | ||
| </> | ||
| ) | ||
| } |
Oops, something went wrong.