Next.js demo for portfolio with Flotiq source

This is a modern, fully-featured portfolio website built with Next.js and powered by Flotiq headless CMS. It showcases how to create a professional portfolio website with dynamic content management, internationalization, and modern web development best practices.

Check our live demo: https://demo-app.flotiq.com/

Key Features

🌐 Internationalization

• Multi-language support (English and Polish included)
• Automatic language detection and switching
• Localized content management through Flotiq

🎨 Modern UI/UX

• Built with Tailwind CSS for responsive design
• Dark/light theme toggle with next-themes
• Shadcn/ui components for consistent design system
• Smooth animations and transitions

📝 Content Management

• Projects: Showcase your work with image galleries, descriptions, and tags
• About Page: Company/personal story, mission, team members, and journey timeline
• Contact: Contact information and forms
• Real-time content editing with Flotiq's live preview

⚡ Performance & Developer Experience

• Next.js with App Router and Turbopack
• TypeScript for type safety
• Flotiq SDK with auto-generated types
• ESLint and Prettier for code quality
• Optimized images with Next.js Image component

🔧 Technical Features

• Server-side rendering (SSR) and static generation
• SEO-friendly with proper meta tags
• Responsive design for all screen sizes
• Git-based content versioning through Flotiq

Getting Started

Environment variables

Prepare .env.local file (data and plugins):

FLOTIQ_API_KEY=RO_KEY
FLOTIQ_EDITOR_KEY=KEY_FROM_PREVIEW_PLUGIN
PUBLIC_URL=http://localhost:3000

or use flotiq-setup:

npx flotiq-setup --nextjs

If you want to read more about our flotiq-nextjs-setup CLI, refer to our Flotiq NextJS docs.

Importing data to the Flotiq

Import data to your space:

npx flotiq-cli 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.

Content Types

The project includes pre-configured Flotiq content types:

• Project: Portfolio items with galleries, descriptions, and tags
• About: Company/personal information with team and journey sections
• Contact: Contact information and form handling
• Media: Image and file management

Plugins

If you want, to manage content for different languages or see changes in realtime, you need to add following plugins to your Flotiq account:

• Multilingual plugin
• Live preview

Development

Install dependencies:

yarn

Run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

Flotiq codegen - install SDK

This project uses Flotiq API SDK library for types safety and IDE autocompletion of user data types.

If you make any changes (additions or deletions) to the content type definitions in your Flotiq account, you need to run:

yarn exec flotiq-api-typegen

Code format and lint

Enable eslint and prettier in the IDE when making changes to the code.

For ensuring correct formatting:

yarn lint
yarn format

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

If you want to learn more about Flotiq, take a look at the Flotiq documentation:

• Flotiq Documentation

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

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

Or to Netlify:

Env variables:

Project requires the following variables to start:

Name	Description
FLOTIQ_EDITOR_KEY	The key used to revalidate cache and live preview
FLOTIQ_API_KEY	Flotiq Read API key for blogpost content objects

Next.js Data Cache

This starter utilizes a data caching mechanism in the Next.js application. After fetching, the data is cached, which means that the cache must be cleared to see the latest data. In this starter, we provide a special API endpoint that clears the cache. You can call it directly or use webhooks that will do it automatically after saving a blog post (both for adding a new entry and editing an existing one).

API Endpoint

To send a request to the endpoint that clears cache, use following command:

curl -X POST https://your-domain.com/api/flotiq/revalidate \
     -H "x-editor-key: <FLOTIQ_EDITOR_KEY>"

Replace https://your-domain.com with your actual URL and FLOTIQ_EDITOR_KEY with the appropriate authorization key value.

Webhooks in Flotiq space

To add a webhook that automatically clears the cache after saving any object, follow these instructions:

1. Go to Flotiq dashboard
2. Go to the Webhooks page and click Add new webhook
3. Name the webhook (e.g. Clear portfolio cache)
4. Paste the URL to your revalidate endpoint, eg. https://your-domain.com/api/flotiq/revalidate
5. As a webhook type choose Content Object Changes Asynchronous (non-blocking)
6. Enable the webhook
7. As a trigger, choose Create, Update and Delete actions on all Content Types
8. Add new header with following fields:
   • Header Name - x-editor-key
   • Header Value - value for FLOTIQ_EDITOR_KEY env variable in your deployment
9. Save the webhook

Example webhook configuration:

Warning! The webhook URL must be public. In development mode, caching is not applied, so the user does not need to worry about manually clearing the cache on http://localhost:3000.

Collaborating

If you wish to talk with us about this project, feel free to hop on our .

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