DOCSEARCHbyAlgolia
Submit Docs

Next.js Landing Page Starter Template

repository·master·Indexed 24 days ago

https://github.com/ixartz/next-js-landing-page-starter-template

A production-ready landing page starter template built with Next.js 14+, Tailwind CSS, and TypeScript. It features a modular component architecture, SEO optimization, and strict type checking. The template includes a layered rendering approach using atomic components and component blocks, with configuration managed via AppConfig.ts.

Tokens
1.1K
Snippets
4
Records
6
Agent score
30%

What's inside next-js-landing-page-starter-template

  1. Customize the landing page theme

    master

    The template follows a layered architecture for customization. You can modify the theme by updating specific files and components:

    Configuration and Assets

    • Favicons: Replace public/apple-touch-icon.png, public/favicon.ico, public/favicon-16x16.png, and public/favicon-32x32.png.
    • Global Styles: Edit src/styles/global.css (Tailwind CSS).
    • App Configuration: Update utils/AppConfig.ts for general settings.

    Component Architecture

    The template uses a layered approach to rendering:

    1. Entry Point: src/pages/index.tsx is the main entry point.
    2. Base Template: src/templates/Base.tsx provides the structural layout using component blocks.
    3. Component Blocks: Located in src/templates/*, these are higher-level compositions.
    4. Atomic Components: Located in src/* (e.g., src/button, src/hero, src/cta), these are the smallest building blocks used by component blocks.

  2. Build and deploy the project

    master

    You can prepare the project for production using standard Next.js build commands or generate a static export.

    Local Production Testing

    To test the production build locally:

    npm run build
npm run start

    Static Export (Optimized Production Build)

    To create an optimized production build suitable for static hosting (e.g., GitHub Pages, S3):

    npm run build-prod

    All generated files will be located in the out folder.

    Netlify Deployment

    You can deploy directly to Netlify by cloning the repository to your GitHub account and using the Netlify Deploy button.

    npm run build
npm run start

# For static export
npm run build-prod

  3. Install and run the Landing Page Template

    master

    To set up the project locally, clone the repository, install dependencies using npm, and start the development server.

    Installation steps:

    1. Clone the repository:
      git clone --depth=1 https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template.git my-project-name
cd my-project-name
    2. Install dependencies:
      npm install
    3. Run in development mode:
      npm run dev

    Once running, open http://localhost:3000 in your browser. Note that the first compilation may take some time.

    git clone --depth=1 https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template.git my-project-name
cd my-project-name
npm install
npm run dev

  4. Configure site settings via AppConfig

    master

    The AppConfig object in src/utils/AppConfig.ts is the central location for customizing global site metadata. You can modify the site name, page title, description, and default locale to match your project's branding and SEO requirements.

    export const AppConfig = {
  site_name: 'Starter',
  title: 'Nextjs Starter',
  description: 'Starter code for your Nextjs Boilerplate with Tailwind CSS',
  locale: 'en',
};

  5. Project structure overview

    master

    The repository is organized as follows:

    • next.config.js: Next.js configuration.
    • public/assets/images: Default images used by the template.
    • src/background: Atomic background component.
    • src/button: Atomic button component.
    • src/cta: Atomic CTA component.
    • src/feature: Atomic feature component.
    • src/footer: Atomic footer component.
    • src/hero: Atomic hero component.
    • src/layout: Atomic layout component.
    • src/navigation: Atomic navigation component.
    • src/pages: Next.js pages (entry points).
    • src/styles: PostCSS/Tailwind CSS styles.
    • src/templates: Default template and component blocks.
    • src/utils: Utility functions.
    • tailwind.config.js: Tailwind CSS configuration.
    • tsconfig.json: TypeScript configuration.

  6. Use the Index component as the landing page entry point

    master

    The Index component serves as the main entry point for the application. It is a functional component that renders the Base template, which contains the core structure and layout of the landing page. To use this as a starting point for your own landing page, you can modify the Index component or customize the Base template it relies on.

    import { Base } from '../templates/Base';

const Index = () => <Base />;

export default Index;