Skip to content

Latest commit

 

History

History
117 lines (72 loc) · 4.69 KB

README.md

File metadata and controls

117 lines (72 loc) · 4.69 KB
Raw
Flotiq logo

Next.js starter boilerplate with Flotiq source

Kick off your project with this hello-world 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-boilerplate.netlify.app

Quick start

  1. Start the project from template using npx

    git clone https://github.com/flotiq/nextjs-starter-boilerplate.git my-hello-world-starter

  2. Import example data from starter to Flotiq

    npm i -g flotiq-cli
cd my-hello-world-starter
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.

    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

    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:

    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.

       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

    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.

    yarn dev

  7. Open the source code and start editing!

    Your site is now running at http://localhost:3000!

    Open the my-hello-world-starter directory in your code editor of choice and edit pages/index.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

    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:

Deploy with Vercel

You can also deploy this project to Heroku in 3 minutes:

Deploy

Or to Netlify:

Deploy

Learning Next.js

Looking for more guidance? Full documentation for Next.js lives on the website. Here are some places to start:

  • To dive straight into code samples, head to the Next.js documentation. 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 Discord Chat.

If you found a bug, please report it in issues.