Xostarter
XO Starter
Overview
This is an easy-to-deploy Next.js starter template created by Ethan G.. It is designed to streamline development with modern tools, ensuring a fast and efficient workflow from setup to deployment.
Technologies
This template leverages a modern tech stack for a smooth developer experience:
- Programming Language: TypeScript – Ensures type safety and better maintainability.
- Framework: Next.js – The leading React framework for hybrid static & server-side rendering.
- Deployment: Vercel – Optimized for seamless, serverless deployment.
- Styling: Tailwind CSS – Utility-first CSS for rapid styling.
- UI Components: shadcn/ui – A flexible, customizable UI component library.
- Animations: Motion – Powerful animations with an intuitive API.
- Icons: lucide-react – Crisp, open-source React icons.
- Linting & Formatting:
Before You Begin
This template uses pnpm as the default package manager for faster dependency resolution and disk space efficiency. However, you can switch to npm, yarn, or bun if preferred.
Updataing Package Manager
By default, this template enforces pnpm. To use another package manager, follow these steps:
1. Remove pnpm Enforcement
Open package.json and modify or remove the following lines:
"preinstall": "npx only-allow pnpm",
"prebuild": "pnpm run lint"
2. Install Dependencies Using Your Preferred Manager
Run one of the following commands:
npm install # or yarn install, bun install
Now you're ready to start building! 🚀
Getting Started
1. Clone the Template
First, clone the repository onto your local machine:
git clone https://github.com/egarrisxn/xostarter.git
cd xo-starter
2. Install Dependencies
Run the following command to install dependencies:
pnpm install
3. Start the Development Server
Launch the local development server:
pnpm dev
4. Open in Your Browser
Once the server is running, open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page will auto-update as you edit the file. Now, get to building! 🚀
Configuration
Easily customize your project by updating utils/config.ts. This file centralizes important settings, allowing for quick adjustments without modifying multiple files.
Styling
This project utilizes shadcn/ui alongside Tailwind CSS v4.
Since Tailwind v4 is still new (as of 2/27), we are using the canary version of the shadcn/ui CLI to add components. To install a UI component, run the following command, replacing [component] with the actual component name:
pnpm dlx shadcn@canary add [component]
Updating UI
To customize the base UI colors, you'll need to reconfigure your CSS variables. Run:
pnpm dlx shadcn@canary init
Fonts
This project uses next/font for optimized font loading. By default, it includes Geist, a modern typeface by Vercel.
You can easily swap out the font for another one. I recommend using next/font for built-in optimization or self-hosting fonts for better performance. Be mindful of font file sizes if sourcing them locally.
Metadata
Since we are using the app router in Next.js 15, many metadata-related assets no longer need to be manually defined in the <Head> of your layout. Instead, Next.js automatically picks them up when they are placed in the app folder.
For example, the following files are already recognized by Next.js:
- OpenGraph & Twitter images:
opengraph-image.png&twitter-image.png+ alt. txt files. - Icons:
favicon.ico,apple-icon.png,icon.svg, &icon.png. - Manifest:
manifest.ts,manifest.json,manifest.webmanifest, ORsite.webmanifest. - SEO & Crawler files:
robots.tsORrobots.txt&sitemap.tsORsitemap.xml.
Because of this, metadata properties like robots, icons, manifest, and OpenGraph/Twitter images are commented out in layout.tsx. They are left in the code for reference, but they are not necessary unless you want to override the default behavior.
If you need to customize metadata on a per-page basis, you can still define it manually inside a metadata object in the corresponding page or layout file. Otherwise, Next.js will handle it automatically.
Quick Note
For generating favicons, icons, and a manifest.json, I highly recommend visiting Real Favicon Generator and using their open-sourced tools.
Analytics
This template includes Vercel Analytics for basic site tracking. After deployment, you can enable analytics through your Vercel dashboard.
If you prefer another analytics solution or are deploying elsewhere, simply uninstall the package and remove the import from layout.tsx.
Deployment
For a seamless deployment experience, use the Deploy button below to launch your project on Vercel.
Note: You are not limited to Vercel and may deploy this template on any platform that supports Next.js. However, in my experience, Vercel provides the fastest and most convenient setup.
Learn More
To explore more about Next.js, check out these resources:
- 📖 Next.js Documentation – Official docs covering features and best practices.
- 🛠️ Next.js GitHub – Browse the source code and contribute.
License
This project is licensed under the MIT license.
Contact
If you have any questions or need further assistance, feel free to reach out to me at github.com/garrisxn or send an email to [email protected] and I'll get back to you as soon as possible!
