Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/flotiq/flotiq-nextjs-recipe-2
https://github.com/flotiq/flotiq-nextjs-recipe-2
nextjs
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/flotiq/flotiq-nextjs-recipe-2
- Owner: flotiq
- License: mit
- Created: 2022-09-07T12:04:55.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-27T14:51:10.000Z (3 months ago)
- Last Synced: 2024-08-27T16:23:44.902Z (3 months ago)
- Topics: nextjs
- Language: JavaScript
- Homepage: https://flotiq-nextjs-recipe-2.netlify.app
- Size: 19.2 MB
- Stars: 7
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Next JS starter for recipes with Flotiq source
===========================
Kick off your project with this recipe boilerplate. This starter ships with the main Next JS configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
Check out live demo: [https://flotiq-nextjs-recipe-2.netlify.app](https://flotiq-nextjs-recipe-2.netlify.app)
## Quick start
1. **Start the project from template using npx**
```bash
git clone https://github.com/flotiq/flotiq-nextjs-recipe-2.git flotiq-nextjs-recipe-2
```
2. **Import example data from starter to Flotiq**
```bash
npm i -g flotiq-cli
cd flotiq-nextjs-recipe-2
flotiq import .flotiq [flotiqApiKey]
```
_Note: You need to put your Read and write API key as the `flotiqApiKey` for import to work, You don't need any content types in your account._
3. **Configure application**
The next step is to configure our application to know from where it has to fetch the data.
Flotiq provides a tool for automatically populating `.env` files with your Flotiq API keys.
```bash
npx flotiq-setup
```
After executing this command, a browser window will open with the Flotiq login screen. Upon successful authentication,
the command will automatically generate appropriately filled .env files for you.
_Note: If there are existing .env files in the project, flotiq-setup may overwrite them._
4. **Install dependencies**
Navigate into your new site’s directory and run
```bash
yarn install
```
5. **Flotiq codegen**
This package simplifies Typescript Fetch API integration for your Flotiq project, tailored to your Flotiq account
data. To build your customized API package, just run this command:
```bash
npx flotiq-codegen-ts generate --compiled-js
```
Now, in your project, you can use the `FlotiqApi` class for easy and convenient communication with the Flotiq API.
```javascript
import {FlotiqApi} from '../flotiqApi/index';
const api = new FlotiqApi(apiKey);
```
Examples of its usage can be found in the `lib/event.js` file of this project or can be explored in the
[flotiq-codegen-ts repository](https://github.com/flotiq/flotiq-codegen-ts)
_Note: If you make any changes (additions or deletions) to the `content type definitions` in your Flotiq account, you will need to rerun `npx flotiq-codegen-ts generate --compiled-js` command._
6. **Start developing.**
Navigate into your new site’s directory and start it up.
```shell
yarn dev
```
7. **Open the source code and start editing!**
Your site is now running at `http://localhost:3000`!
Open the `flotiq-nextjs-recipe-2` directory in your code editor of choice and edit `pages/[pages].js`. Save your changes and the browser will update in real time!
8. **Manage your content using Flotiq editor**
You can now easily manage your content using [Flotiq editor](https://editor.flotiq.com)
_Note: If you are using `FlotiqApi` generated from `flotiq-codegen-ts` remember to rerun `npx flotiq-codegen-ts generate --compiled-js`
command after changes (additions or edits) to the `content type definitions` in your Flotiq_
## Deploy
Deploy this starter with one click on [Vercel](https://vercel.com/):
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fflotiq%2Fflotiq-nextjs-recipe-2)
You can also deploy this project to [Heroku](https://www.heroku.com/) in 3 minutes:
[](https://heroku.com/deploy?template=https%3A%2F%2Fgithub.com%2Fflotiq%2Fflotiq-nextjs-recipe-2)
Or to [Netlify](https://www.netlify.com/):
[](https://app.netlify.com/start/deploy?repository=https%3A%2F%2Fgithub.com%2Fflotiq%2Fflotiq-nextjs-recipe-2)
## Learning Next.js
Looking for more guidance? Full documentation for Next.js lives [on the website](https://nextjs.org/). Here are some places to start:
- **To dive straight into code samples, head [to the Next.js documentation](https://nextjs.org/docs/getting-started).** In particular, check out the _Guides_, _API Reference_, and _Advanced Tutorials_ sections in the sidebar.
## Collaborating
If you wish to talk with us about this project, feel free to hop on our [](https://discord.gg/FwXcHnX).
If you found a bug, please report it in [issues](https://github.com/flotiq/flotiq-nextjs-recipe-2/issues).