A modern Next.js website for AI X Network featuring a sleek design, contact forms, and user authentication.
- Modern Design: Clean, professional interface with responsive design
- Contact Forms: Multiple contact forms with database storage
- User Authentication: NextAuth.js integration for secure user management
- Email Integration: Resend API for email notifications
- Database: PostgreSQL database for data persistence
- Responsive: Mobile-first design that works on all devices
- Frontend: Next.js 14, React, TypeScript
- Styling: Tailwind CSS
- Authentication: NextAuth.js
- Database: PostgreSQL
- Email: Resend API
- Deployment: Vercel/Netlify ready
Before you begin, ensure you have:
- Node.js 18+ installed
- npm or yarn package manager
- PostgreSQL database (or use the provided connection)
- Resend API key (for email functionality)
-
Clone the repository
git clone <your-repo-url> cd aixnetwork
-
Navigate to the app directory
cd app -
Install dependencies
npm install # or yarn install -
Set up environment variables
Copy the
.env.exampleto.envand update the values:cp .env.example .env
Required environment variables:
# Database Configuration DATABASE_URL="your_postgresql_connection_string" # Email Configuration (Resend API) RESEND_API_KEY="your_resend_api_key" SALES_EMAIL="sales@yourdomain.com" FROM_EMAIL="noreply@yourdomain.com" # NextAuth Configuration NEXTAUTH_SECRET="your_secure_random_string" NEXTAUTH_URL="http://localhost:3000" # For local development
-
Run the development server
npm run dev # or yarn dev -
Open your browser
Navigate to http://localhost:3000 to see the application.
| Variable | Description | Example |
|---|---|---|
DATABASE_URL |
PostgreSQL connection string | postgresql://user:pass@host:5432/db |
RESEND_API_KEY |
Resend API key for emails | re_xxxxxxxxxxxxxxxx |
SALES_EMAIL |
Email for receiving contact forms | sales@yourdomain.com |
FROM_EMAIL |
Email address for sending notifications | noreply@yourdomain.com |
NEXTAUTH_SECRET |
Secret for NextAuth.js sessions | your_secure_random_string |
NEXTAUTH_URL |
Base URL of your application | https://yourdomain.com |
-
Resend API Key:
- Sign up at resend.com
- Go to API Keys section
- Create a new API key
- Add your domain for email sending
-
NextAuth Secret:
- Generate a secure random string
- You can use:
openssl rand -base64 32
-
Push your code to GitHub (see GitHub Setup section below)
-
Deploy to Vercel:
- Go to vercel.com
- Click "New Project"
- Import your GitHub repository
- Set the root directory to
app - Add environment variables in Vercel dashboard
- Deploy!
-
Configure Environment Variables in Vercel:
- Go to your project settings
- Navigate to "Environment Variables"
- Add all required variables from your
.envfile - Update
NEXTAUTH_URLto your Vercel domain
-
Push your code to GitHub
-
Deploy to Netlify:
- Go to netlify.com
- Click "New site from Git"
- Choose your GitHub repository
- Set build directory to
app - Set build command to
npm run build - Set publish directory to
app/.next - Add environment variables
- Deploy!
For static deployment without server-side features:
-
Configure Next.js for static export (in
app/next.config.js):/** @type {import('next').NextConfig} */ const nextConfig = { output: 'export', trailingSlash: true, images: { unoptimized: true } } module.exports = nextConfig
-
Build and export:
cd app npm run build -
Deploy the
outfolder to GitHub Pages
- Go to github.com and sign in
- Click the "+" icon in the top right corner
- Select "New repository"
- Choose a repository name (e.g.,
ai-x-network) - Add a description: "AI X Network - Modern Next.js website"
- Choose visibility:
- Public: Anyone can see this repository
- Private: Only you and collaborators can see it
- Don't initialize with README, .gitignore, or license (we already have these)
- Click "Create repository"
After creating the repository, run these commands in your project root:
# Add the GitHub repository as remote origin
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPOSITORY_NAME.git
# Push your code to GitHub
git branch -M main
git push -u origin mainReplace YOUR_USERNAME and YOUR_REPOSITORY_NAME with your actual GitHub username and repository name.
- Go to your GitHub repository page
- You should see all your project files
- Check that the
.envfile is NOT uploaded (it should be in .gitignore)
- Never commit
.envfiles to version control - Always use environment variables for sensitive data
- Generate strong secrets for production
- Use HTTPS in production
- Keep dependencies updated regularly
After deployment, test these features:
- Homepage loads correctly
- Navigation works on all pages
- Contact forms submit (check database)
- Email notifications work (if configured)
- Authentication flows work properly
- Responsive design on mobile devices
aixnetwork/
βββ app/ # Next.js application
β βββ components/ # React components
β βββ pages/ # Next.js pages
β βββ styles/ # CSS and styling
β βββ public/ # Static assets
β βββ .env # Environment variables (not in git)
β βββ package.json # Dependencies
β βββ next.config.js # Next.js configuration
βββ .gitignore # Git ignore rules
βββ README.md # This file
βββ DEPLOYMENT.md # Detailed deployment guide
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues:
- Check the Issues page
- Create a new issue with detailed description
- Include error messages and steps to reproduce
- Live Site: [Your deployed URL]
- Documentation: [Link to detailed docs]
- API Reference: [Link to API docs if applicable]
Made with β€οΈ for AI X Network