6424e1f1d9
## Summary This PR adds a basic example of how [Tesfy](https://tesfy.io/) could be integrated with Next.js. Tesfy is a project that I've working on during quarantine weekends, mainly to learn new stuff and provide **free** and **unlimited** A/B Tests and Feature Flags while keeping a good performance and the library [size](https://bundlephobia.com/result?p=react-tesfy@1.2.1) as small as possible. The configuration file could be set up using a [web application](https://app.tesfy.io/) (hosted in Vercel 🎉 ) or by your self. ## Implementation - Created `with-tesfy` folder - Added two pages `index.js` and `features.js` to show how experiments and features could be used - The only thing that must be persisted is the `userId`. Used a cookie to save it. - Uses `getServerSideProps` to fetch the configuration file and get/create the `userId`. ## Screenshots There are some screenshots from the web application. Where you can easily configure experiments and audiences per project. Teams and features will soon be added.    This is my first PR! sorry if I made something wrong 😞 . Any feedback is more than welcome. Also I want to thank you all for the awesome work with Next.js ❤️
43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
import { Experiment, Variation } from 'react-tesfy'
|
|
import { getTesfyProps } from '../utils'
|
|
|
|
export const getServerSideProps = getTesfyProps(async () => {
|
|
return { props: {} }
|
|
})
|
|
|
|
const IndexPage = () => {
|
|
return (
|
|
<>
|
|
<h1>Experiments</h1>
|
|
|
|
<section>
|
|
<h2>Experiment 1 - Allocation</h2>
|
|
<Experiment id="experiment-1">
|
|
<Variation>
|
|
<p style={{ color: 'yellow' }}>Yellow</p>
|
|
</Variation>
|
|
<Variation id="0">
|
|
<p style={{ color: 'blue' }}>Blue</p>
|
|
</Variation>
|
|
<Variation id="1">
|
|
<p style={{ color: 'red' }}>Red</p>
|
|
</Variation>
|
|
</Experiment>
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Experiment 2 - Audience</h2>
|
|
<Experiment id="experiment-2" attributes={{ countryCode: 'us' }}>
|
|
<Variation>
|
|
<p style={{ fontWeight: 'bold' }}>Bold</p>
|
|
</Variation>
|
|
<Variation id="0">
|
|
<p>Normal</p>
|
|
</Variation>
|
|
</Experiment>
|
|
</section>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default IndexPage
|