Designaroni Next is a portfolio front-end template built on Next.js v12.2.5 and TypeScript, created by Designaroni to pair with the designaroni-strapi headless CMS backend. It consumes a GraphQL API from Strapi and is deployed on Vercel, providing a customizable React-based showcase site with animations, iconography, and strict linting.
What is Designaroni Next?
Designaroni Next is a front-end repository for a portfolio website that runs on Next.js and TypeScript, maintained by Designaroni. It takes content from a Strapi CMS backend through a GraphQL API and outputs a React front end, deployed on Vercel. The repo includes environment variable configuration for local, test, and production deployments on Vercel.
Key Features
- Next.js and TypeScript — Built on Next.js v12.2.5 and TypeScript, bootstrapped with create-next-app, and includes API routes in the pages/api directory.
- Strapi CMS integration — The front end consumes a Strapi headless CMS backend hosted on Digital Ocean and AWS, which serves a GraphQL API to the Next.js app.
- Styling with SASS and CSS Modules — Uses SASS v1.5.1 and CSS Modules, with Stylelint v14.8.2 for linting SCSS files.
- Framer Motion animations — Framer Motion v6.5.1 is included for React animation support.
- Phosphor Icons — Phosphor Icons v1.4.1 provides the icon set.
- Linting pipeline — Custom yarn lint commands run TypeScript checking (tsc --noEmit), Next.js lint (next lint), and Stylelint on all SCSS.
- Quality tooling — Prettier v2.6.2 and ESLint v8.2.0 are configured, with Dependabot for dependency security updates.
- Vercel deployment — The project is set up for Vercel with separate environment variables for production and preview deployments.
Who is it for?
- Portfolio developers who want a Next.js + TypeScript front end wired to a Strapi CMS and deployed on Vercel.
- Strapi users who need a reference implementation of a GraphQL-connected front end with modular styling.
- Agencies and freelancers who want a customizable portfolio with animation, icons, and a project management workflow (Jira integration indicated in the repo).
What can you do with Designaroni Next?
- Connect your own Strapi backend — Change the NEXT_PUBLIC_STRAPI_API_URL and NEXT_PUBLIC_IMAGES_DOMAIN environment variables to point to your Strapi instance.
- Customize the portfolio — Edit pages/index.tsx to change the homepage and add new pages under the pages/ directory using Next.js routing.
- Add API routes — Use the pages/api directory to create custom serverless functions, as demonstrated by the default hello endpoint.
- Run targeted linting — Use yarn lint:ts, yarn lint:js, or yarn lint:scss to check only TypeScript, JavaScript, or SCSS respectively.
How does Designaroni Next work?
The setup requires two repositories: the front end here and the designaroni-strapi backend. Copy the env.example file to .env.local, start Strapi with yarn local in the backend repo, then run yarn local in this app to launch the Next.js front end. During development the front end fetches content from Strapi via GraphQL at the configured URL.
FAQ
Is Designaroni Next free to use?
Yes, the repository is released under the MIT license, as shown in the badges.
How do I configure environment variables?
Copy env.example to .env.local for local development. For Vercel deployments, set the production, preview, and optional test environment variables on the Vercel project dashboard for values like NEXT_PUBLIC_STRAPI_API_URL.
What versions does the template use?
The badge list shows Next.js v12.2.5, TypeScript (no version badge), Framer Motion v6.5.1, Phosphor Icons v1.4.1, SASS v1.5.1, Prettier v2.6.2, ESLint v8.2.0, and Stylelint v14.8.2.
Does it require Strapi?
Yes, the front end is designed to consume the Strapi GraphQL API from the designaroni-strapi project. You would need to adapt the data fetching to use another CMS or API source.
