A modern, elegant, and easily extensible academic research lab website built with Next.js 14, TypeScript, and Tailwind CSS.
- Stunning Homepage with hero section, stats, featured research, and latest news
- People Profiles - Showcase lab members with detailed profile pages
- Research Projects - Display projects with filtering by tags
- Publications - Organized publication list with BibTeX citations
- News & Blog - Share updates and announcements
- Contact Page - Contact form and lab information
- Markdown-based CMS - Easy content management without a database
- Responsive Design - Beautiful on all devices
- Smooth Animations - Powered by Framer Motion
- SEO Optimized - Built with Next.js 14 App Router
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
- Content: Markdown with Gray Matter
- Deployment: Vercel, Netlify, or any Node.js host
- Node.js 18+ and npm/yarn/pnpm
# Install dependencies
npm install
# Run development server
npm run dev
# Build for production
npm run build
# Start production server
npm startOpen http://localhost:3000 to view the website.
All content is managed through Markdown files in the content/ directory. No database required!
content/
├── people/ # Lab members
├── projects/ # Research projects
├── news/ # News and blog posts
└── publications/ # Academic publications
Create a new Markdown file in content/people/:
---
name: "Dr. Jane Smith"
role: "Postdoctoral Researcher"
bio: "Expert in machine learning and computer vision"
image: "https://example.com/photo.jpg" # Optional
email: "jane.smith@example.com" # Optional
website: "https://janesmith.com" # Optional
github: "janesmith" # Optional
linkedin: "janesmith" # Optional
twitter: "janesmith" # Optional
---
Dr. Jane Smith is a postdoctoral researcher specializing in...
## Education
- PhD in Computer Science, MIT, 2022
- MS in Computer Science, Stanford, 2018
## Research Interests
- Deep Learning
- Computer Vision
- Neural Architecture SearchCreate a new Markdown file in content/projects/:
---
title: "Project Title"
description: "Brief description of the project"
image: "https://example.com/project-image.jpg" # Optional
tags: ["Machine Learning", "Computer Vision"] # Optional
date: "2024-03-15" # Optional
featured: true # Optional - shows as featured
---
# Project Name
Full description of your research project...
## Overview
...
## Key Contributions
...
## Publications
...Create a new Markdown file in content/news/:
---
title: "Paper Accepted at NeurIPS 2024"
date: "2024-03-15"
excerpt: "Brief summary that appears on the listing page"
author: "Dr. Jane Doe" # Optional
image: "https://example.com/news.jpg" # Optional
---
Full content of your news article...Create a new Markdown file in content/publications/:
---
title: "Paper Title"
authors: ["Jane Doe", "John Smith", "Alice Johnson"]
venue: "Conference Name (ACRONYM)"
year: 2024
pdf: "https://arxiv.org/pdf/xxxx.xxxxx.pdf" # Optional
doi: "10.xxxx/xxxxx" # Optional
abstract: "Brief abstract..." # Optional
bibtex: | # Optional
@inproceedings{doe2024paper,
title={Paper Title},
author={Doe, Jane and Smith, John},
booktitle={Conference Name},
year={2024}
}
---
Full paper details and additional content...Edit tailwind.config.ts to customize the color scheme:
colors: {
primary: {
// Your primary color shades
},
accent: {
// Your accent color shades
}
}Edit app/layout.tsx to update site title and description:
export const metadata: Metadata = {
title: "Your Lab Name",
description: "Your lab description",
};Edit components/Navigation.tsx to modify navigation menu items.
Edit components/Footer.tsx to update contact information and social links.
Edit app/contact/page.tsx to update your lab's contact details.
labpage/
├── app/ # Next.js app directory
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Homepage
│ ├── people/ # People pages
│ ├── research/ # Research/projects pages
│ ├── publications/ # Publications pages
│ ├── news/ # News/blog pages
│ └── contact/ # Contact page
├── components/ # React components
│ ├── Navigation.tsx
│ ├── Footer.tsx
│ ├── Hero.tsx
│ ├── PersonCard.tsx
│ └── ...
├── content/ # Markdown content files
│ ├── people/
│ ├── projects/
│ ├── news/
│ └── publications/
├── lib/ # Utility functions
│ └── content.ts # Content loading utilities
└── public/ # Static assets
- Push your code to GitHub
- Import your repository on Vercel
- Deploy with one click!
- Push your code to GitHub
- Import your repository on Netlify
- Build command:
npm run build - Publish directory:
.next
Build the static site:
npm run buildThe built files will be in the .next directory.
- Images: Use high-quality images from Unsplash or your own photos
- Performance: Images are automatically optimized by Next.js
- SEO: Each page has customizable metadata for better search engine visibility
- Analytics: Add Google Analytics or other tracking in
app/layout.tsx - Forms: The contact form is frontend-only. Integrate with services like:
- Get your GA tracking ID
- Add it to
app/layout.tsx:
<Script src={`https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID`} />Configure your custom domain in your hosting provider's dashboard.
Create a .env.local file for sensitive data:
NEXT_PUBLIC_SITE_URL=https://yourlab.edu
CONTACT_EMAIL=lab@yourlab.edu
For issues or questions:
- Check the Next.js Documentation
- Review Tailwind CSS Docs
- Read Framer Motion Docs
MIT License - feel free to use this for your own lab website!
Built with ❤️ using modern web technologies.