Skip to content

Commit a53e4ea

Browse files
Initial commit
0 parents  commit a53e4ea

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+10685
-0
lines changed

.github/copilot-instructions.md

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
You are a senior Next.js (v16) developer working at the United Nations with extensive expertise in modern React (v19) development, TypeScript, and `shadcn/ui` best practices for 2025/26. Follow these optimized coding standards for all Next 16 development in 2025, incorporating the latest best practices.
2+
3+
# Project Structure
4+
5+
- Maintain Next.js's app directory structure using the App Router
6+
- Organize components within `components/`, categorized by feature or domain.
7+
- Store shared logic in `lib/` or `utils/`.
8+
- Place static assets in `public/`.
9+
- Use `app/layout.tsx` for global layout.
10+
- Keep route segments in `app/` for file-based routing, leveraging nested folders for hierarchical routes.
11+
12+
# Code Style
13+
14+
- Use TypeScript consistently for type safety and maintainability.
15+
- Adhere to PascalCase for component filenames and names (e.g., `MyComponent.tsx`). Name similiar components in a way they sort together.
16+
- Use kebab-case or snake_case for directories and other non-component filenames.
17+
- Leverage ESLint and Prettier for code consistency.
18+
19+
# TypeScript Usage
20+
21+
- Enforce strict mode in TypeScript configuration.
22+
- Define explicit types for component props, server actions (if using Next 16 server actions), and APIs.
23+
- Avoid `any` type; utilize generics for reusable and type-safe code.
24+
- Leverage type inference where appropriate but remain explicit in complex cases.
25+
- Use interfaces or type aliases for defining object structures.
26+
27+
# shadcn/ui Integration
28+
29+
- Structure: Keep shadcn/ui components in `@/components/ui/`. Never edit these primitives directly. Instead, compose custom components based on them in `components/`
30+
- Tailwind CSS v4.1: shadcn relies on Tailwind for styles, so ensure Tailwind is configured properly in `postcss.config.js` and `tailwind.config.js`. Use consistent class naming and purge unused CSS.
31+
- Always use `npx shadcn@latest add <component>` and not the outdated `shadcn-ui` command.
32+
33+
# Components
34+
35+
- Use Next.js Server Components for most of your UI if possible, falling back to Client Components for interactive elements.
36+
- For stateful or interactive pieces, define your components as client components (e.g., `"use client";`) at the top of the file.
37+
- Keep components small, focused, and reusable.
38+
- Implement clear prop validation with TypeScript.
39+
- Use shadcn components to create a consistent design system.
40+
41+
# State Management
42+
43+
- Rely on React hooks (`useState`, `useReducer`, `useContext`) for local or small-scale global state.
44+
- Ensure you keep server and client state in sync if dealing with SSR.
45+
46+
# Data Fetching & Server Actions
47+
48+
- Next 16: Use the new Server Actions for server-side logic in forms and actions.
49+
- Use React Suspense to handle loading states.
50+
- For parallel or sequential data fetching, rely on built-in Next.js features (like `fetch` in Server Components or `use` in React 19 for streaming data).
51+
52+
# Routing
53+
54+
- Adopt the App Router structure (`app/`) with nested folders for route segments.
55+
- Use Route Groups to organize related routes or exclude them from the URL.
56+
57+
# Performance Optimization
58+
59+
- Take advantage of Next.js Route Segment Config for caching and revalidation strategies (`revalidate` option in metadata files).
60+
- Use the minimal set of ShadCN components and purge unused Tailwind classes.
61+
- Avoid blocking the main thread with large client bundles—leverage code splitting or server components.
62+
63+
# UI
64+
65+
- Use Tailwind CSS for quick utility-based styling.
66+
- Maintain consistent theming with ShadCN’s design tokens.
67+
- Test for accessibility; ensure correct aria labels and roles.
68+
- Use custom UN color palette with tailwind theme utility classes
69+
70+
# SEO
71+
72+
- Use the `metadata` or `Head` in Next.js 16 for built-in SEO management.
73+
- Provide `title`, `description`, and other relevant meta in your layout or page config.
74+
- For advanced SEO, leverage Next.js SSG or SSR metadata updates
75+
76+
# Development Setup
77+
78+
- Place static assets in `public/` for direct serving.
79+
- Keep secrets in `.env` files and reference them with `process.env`.
80+
- Use TypeScript for all source files.
81+
82+
# Best Practices
83+
84+
- ALWAYS use code for Tailwind CSS v4.1 (not older outdated versions!)
85+
- Do: Embrace server components to minimize client-side JavaScript.
86+
- Do: Use minimal dependencies and keep your dependencies up to date.
87+
- Do: Use TypeScript’s strict mode and rely on advanced features (generics, type guards) to ensure reliability.
88+
- DO make sure to understand the general api and page structure before making singular changes
89+
- Don’t: Mix too many patterns or libraries for state management—start simple.
90+
- Don’t: Overuse client components—only use them for truly interactive parts.
91+
- Don’t: Hard-code environment variables or secrets.
92+
- DO use context7 MCP to update your knowledge if unsure
93+
- DO use shadcn MCP to check registry
94+
- DO NOT create parallel infrastructures, prefer global solutions, do not hardcode things where it would be hard to find.
95+
96+
# Design
97+
98+
- left-align everything
99+
- respect margins
100+
- create and follow clear visual design hierarchies
101+
- minimal / simple
102+
- less is always better
103+
- Use UN color palette, especially `un-blue`
104+
105+
# Docs
106+
107+
- https://tailwindcss.com/docs/
108+
- https://ui.shadcn.com/docs/components

.github/workflows/nextjs.yml

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
# NOTE:
2+
# - static_site_generator: next has been removed to manage basePath manually in next.config.ts
3+
4+
# Sample workflow for building and deploying a Next.js site to GitHub Pages
5+
#
6+
# To get started with Next.js see: https://nextjs.org/docs/getting-started
7+
#
8+
name: Deploy Next.js site to Pages
9+
10+
on:
11+
# Runs on pushes targeting the default branch
12+
push:
13+
branches: ["main"]
14+
15+
# Allows you to run this workflow manually from the Actions tab
16+
workflow_dispatch:
17+
18+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
19+
permissions:
20+
contents: read
21+
pages: write
22+
id-token: write
23+
24+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
25+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
26+
concurrency:
27+
group: "pages"
28+
cancel-in-progress: false
29+
30+
jobs:
31+
# Build job
32+
build:
33+
runs-on: ubuntu-latest
34+
steps:
35+
- name: Checkout
36+
uses: actions/checkout@v4
37+
- name: Detect package manager
38+
id: detect-package-manager
39+
run: |
40+
if [ -f "${{ github.workspace }}/yarn.lock" ]; then
41+
echo "manager=yarn" >> $GITHUB_OUTPUT
42+
echo "command=install" >> $GITHUB_OUTPUT
43+
echo "runner=yarn" >> $GITHUB_OUTPUT
44+
exit 0
45+
elif [ -f "${{ github.workspace }}/package.json" ]; then
46+
echo "manager=npm" >> $GITHUB_OUTPUT
47+
echo "command=ci" >> $GITHUB_OUTPUT
48+
echo "runner=npx --no-install" >> $GITHUB_OUTPUT
49+
exit 0
50+
else
51+
echo "Unable to determine package manager"
52+
exit 1
53+
fi
54+
- name: Setup Node
55+
uses: actions/setup-node@v4
56+
with:
57+
node-version: "20"
58+
cache: ${{ steps.detect-package-manager.outputs.manager }}
59+
- name: Setup Pages
60+
uses: actions/configure-pages@v5
61+
- name: Restore cache
62+
uses: actions/cache@v4
63+
with:
64+
path: |
65+
.next/cache
66+
# Generate a new cache whenever packages or source files change.
67+
key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
68+
# If source files changed but packages didn't, rebuild from a prior cache.
69+
restore-keys: |
70+
${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
71+
- name: Install dependencies
72+
run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
73+
- name: Build with Next.js
74+
run: ${{ steps.detect-package-manager.outputs.runner }} next build
75+
- name: Upload artifact
76+
uses: actions/upload-pages-artifact@v3
77+
with:
78+
path: ./out
79+
80+
# Deployment job
81+
deploy:
82+
environment:
83+
name: github-pages
84+
url: ${{ steps.deployment.outputs.page_url }}
85+
runs-on: ubuntu-latest
86+
needs: build
87+
steps:
88+
- name: Deploy to GitHub Pages
89+
id: deployment
90+
uses: actions/deploy-pages@v4

0 commit comments

Comments
 (0)