SEO Starter

SEO Next.js Starter

Preview

You can see a live preview of the application at SEO Next.js Starter Preview.

Use This Template

You can use this template to create your own project by clicking the button below:

About This Template

The SEO Next.js Starter is designed to help developers quickly set up a robust and SEO-friendly web application using Next.js. This template provides a solid foundation for building applications that are optimized for search engines and performance.

Features

• Server-side rendering for better SEO
• Static site generation for fast performance
• Dynamic routing for flexible navigation
• Built-in CSS and Sass support
• API routes for backend functionality

Getting Started with This Template

To get started with this template, follow these steps:

1. Clone the repository.
2. Install dependencies using pnpm install.
3. Create a .env file based on the provided .env.example file and fill in your own values.
4. Optionally, you can edit the src/config.ts file directly to set your configuration values.
5. Run the development server with pnpm dev.

Who Uses This Template

This template is designed for developers and teams looking to quickly set up SEO-friendly applications using Next.js. Here are some examples of projects and companies that utilize this template or similar setups:

• Toolbox Hub - Online Toolbox | Free & Useful Online Tools Collection
• Stair Calculator - Stair Calculator Pro: Precise Design & Construction Measurements

Submit Your Website

If you have created a project using this template and would like to share it, please submit your website link on the Submit Your Website issue.

Environment Variables

You can configure your application using environment variables. The .env.example file contains the following variables:

1
# replace with your own site name
2
NEXT_PUBLIC_SITE_NAME="SEO Next.js Starter"
3

4
# replace with your own title
5
NEXT_PUBLIC_TITLE="SEO Next.js Starter - A Starter Template for SEO Optimized Next.js Projects"
6

7
# replace with your own description
8
NEXT_PUBLIC_DESCRIPTION="A simple and easy-to-use starter template for building SEO optimized Next.js applications with best practices and performance in mind."
9

10
# replace with your own URL
11
NEXT_PUBLIC_URL="https://example.com"
12

13
# <optional> if you want to use Google Analytics
14
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID="your-google-analytics-id"

Vercel Environment Variables

If you are deploying your application to Vercel, you can set environment variables directly in the Vercel dashboard. Follow these steps:

1. Go to your Vercel dashboard and select your project.
2. Navigate to the "Settings" tab.
3. Scroll down to the "Environment Variables" section.
4. Click on "Add" to create a new environment variable.
5. Enter the variable name (e.g., NEXT_PUBLIC_SITE_NAME) and its corresponding value.
6. Repeat this for all the environment variables you need to set.
7. After adding the variables, redeploy your application to apply the changes.

For more information on configuring environment variables in Vercel, you can refer to the Vercel Environment Variables Documentation.

Technical Details

Metadata Management

In Next.js, you can manage metadata using various conventions, including robots.ts, sitemap.ts, and layout metadata in layout.tsx. This allows you to define how your application interacts with search engines and social media platforms. For more details, refer to the Next.js Metadata Documentation.

Open Graph Image Generation

To optimize social media image generation, you can use the Vercel @vercel/og library. This library allows you to create dynamic Open Graph images using HTML and CSS, which can enhance how your content appears on social media platforms. For more information, check the Open Graph Image Generation Documentation.

SEO Resources

For more information on SEO best practices and guides, check out the Ahrefs SEO Guide.

Deployment

You can easily deploy your application to Vercel with a single click. Click the button below to get started:

Documentation

For more information, check the official Next.js documentation at nextjs.org/docs.

Contributing

We welcome contributions! If you would like to contribute to this project, please follow the guidelines in the repository.

License

This project is licensed under the MIT License.