|
1 |
| -# Edge-side Experiments with Optimizely and Next.js |
| 1 | +# Edge-side Experiments with Optimizely |
2 | 2 |
|
3 |
| -This project is a simple Next.js app that demonstrates how to use edge functions to run Optimizely experiments. The app is a Next.js starter project using server components that renders the text direction based on the experiment variant provided as a query parameter. |
| 3 | +This example demonstrates how you may use edge functions to run Optimizely experiments. |
4 | 4 |
|
5 | 5 | The request workflow is as follows:
|
6 | 6 |
|
7 |
| -- The client makes a request to `/optimizely` which is handled by an edge function. |
| 7 | +- The client makes a request to `/` which is handled by an edge function. |
8 | 8 | - The edge function fetches the Optimizely experiment variant and decides which text direction to use based on the variant.
|
9 |
| -- The edge function makes another fetch request to `/` - the Next.js app, with the experiment variant as the `dir` query parameter. |
10 |
| -- The Next.js app renders the page on the server with the text direction based on the query parameter. |
11 |
| -- The server-rendered page response is returned to the edge function. |
| 9 | +- The edge function makes another fetch request to the Wikipedia homepage and gets the HTML content. |
| 10 | +- The edge function modifies the HTML content to include the experiment variant and returns it to the client. |
12 | 11 | - The edge function sets the experiment variant cookie and returns the page to the client.
|
| 12 | +- Depending on the experiment variant, the page may render normal or mirrored based on the applied transformation. |
13 | 13 |
|
14 | 14 | ## Getting Started
|
15 | 15 |
|
@@ -37,47 +37,4 @@ OPTIMIZELY_SDK_KEY=...
|
37 | 37 | npm run edgio:dev
|
38 | 38 | ```
|
39 | 39 |
|
40 |
| -5. Open [http://localhost:3000/optimizely](http://localhost:3000/optimizely) with your browser to see the result. This will set a cookie to ensure you remain on the experience across page navigation. Issue multiple requests using `curl` to see the experiment variant change: |
41 |
| - |
42 |
| -```bash |
43 |
| -curl http://localhost:3000/optimizely | grep 'direction:' |
44 |
| -``` |
45 |
| - |
46 |
| ---- |
47 |
| - |
48 |
| -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). |
49 |
| - |
50 |
| -## Getting Started |
51 |
| - |
52 |
| -First, run the development server: |
53 |
| - |
54 |
| -```bash |
55 |
| -npm run dev |
56 |
| -# or |
57 |
| -yarn dev |
58 |
| -# or |
59 |
| -pnpm dev |
60 |
| -# or |
61 |
| -bun dev |
62 |
| -``` |
63 |
| - |
64 |
| -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. |
65 |
| - |
66 |
| -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. |
67 |
| - |
68 |
| -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. |
69 |
| - |
70 |
| -## Learn More |
71 |
| - |
72 |
| -To learn more about Next.js, take a look at the following resources: |
73 |
| - |
74 |
| -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. |
75 |
| -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. |
76 |
| - |
77 |
| -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! |
78 |
| - |
79 |
| -## Deploy on Vercel |
80 |
| - |
81 |
| -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. |
82 |
| - |
83 |
| -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. |
| 40 | +5. Open [http://localhost:3000/](http://localhost:3000/) with your browser to see the result. Note: The page may render normally or mirrored based on the experiment variant. |
0 commit comments