Skip to main content

​
System Requirements

Before installing Pengrafic, ensure your system meets these requirements:
  • Node.js: 18.x or higher
  • Package Manager: npm, yarn, or pnpm
  • Operating System: macOS, Windows, or Linux
This template is built with Next.js 14.1.0 and React 18.2.0, ensuring you have access to the latest features including the App Router and Server Components.

​
Installation Methods

1

Clone or Download the Repository

First, get the Pengrafic template on your local machine:
git clone https://github.com/your-repo/pengrafic-template.git
cd pengrafic-template
2

Install Dependencies

Install all required packages using your preferred package manager:
npm install
The template includes these key dependencies:
  • Next.js (^14.1.0) - React framework
  • React (^18.2.0) - UI library
  • Tailwind CSS (^3.4.1) - Utility-first CSS
  • TypeScript (^5.3.3) - Type safety
  • Framer Motion (^12.7.4) - Animations
  • Supabase (^2.81.1) - Backend services
  • next-themes (^0.2.1) - Dark mode support
3

Environment Configuration

If you plan to use Supabase for authentication or database features, create a .env.local file in the root directory:
.env.local
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
Never commit your .env.local file to version control. It’s already included in .gitignore by default.
To get your Supabase credentials:
  1. Create a project at supabase.com
  2. Go to Project Settings → API
  3. Copy your project URL and anon/public key
If you’re not using Supabase, you can skip this step. The template will work without it for static pages.
4

Start Development Server

Run the development server:
npm run dev
Your application will be available at http://localhost:3000

​
Project Structure

After installation, you’ll see this structure: 
pengrafic-template/
├── src/
│   ├── app/              # Next.js App Router pages
│   │   ├── layout.tsx    # Root layout with metadata
│   │   ├── page.tsx      # Home page
│   │   ├── about/        # About page
│   │   ├── blog/         # Blog pages
│   │   └── contact/      # Contact page
│   ├── components/       # React components
│   │   ├── Hero/         # Hero section
│   │   ├── Features/     # Features section
│   │   ├── Header/       # Navigation
│   │   ├── Footer/       # Footer
│   │   └── ...
│   ├── lib/              # Utility functions
│   │   └── supabaseClient.ts
│   └── types/            # TypeScript types
├── public/               # Static assets
├── tailwind.config.js    # Tailwind configuration
├── next.config.js        # Next.js configuration
└── package.json          # Dependencies

​
Build for Production

When you’re ready to deploy: 
npm run build
npm run start
The build command:
  • Optimizes your application for production
  • Generates static pages where possible
  • Minifies JavaScript and CSS
  • Optimizes images

​
Verification

To verify your installation is successful:
  1. ✅ Development server starts without errors
  2. ✅ Home page loads at localhost:3000
  3. ✅ Dark mode toggle works
  4. ✅ Navigation between pages works smoothly
  5. ✅ No console errors in browser DevTools

​
Troubleshooting

If port 3000 is occupied, Next.js will automatically try port 3001. Or specify a different port:
npm run dev -- -p 3001
Delete node_modules and reinstall:
rm -rf node_modules package-lock.json
npm install
Ensure you’re using Node.js 18.x or higher:
node --version
Then rebuild:
npm run build
Verify your environment variables:
  1. Check .env.local exists in root directory
  2. Verify credentials are correct
  3. Ensure no extra spaces in variable values
  4. Restart the dev server after changing env variables

​
Next Steps

Now that you have Pengrafic installed:

Quickstart Guide

Learn how to customize your first page and add components

Configuration

Configure theme colors, fonts, and site metadata

Components

Explore available components and how to use them

Deployment

Deploy your site to Vercel, Netlify, or other platforms

Build docs developers (and LLMs) love

Get started for freeTalk to us