File Structure

This section will show you how to keep your files organized. Our theme file structure that looks like this.

Theme folder and file structure

Inside the zip-file you'll find the following directories and files. The application is created using npx create-next-app@latest by seleting following options at the time of setup.

What is your project named? geeksnextjs
Would you like to use TypeScript? No
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? No
Would you like to use `src/` directory? No
Would you like to use App Router? (recommended) No
Would you like to customize the default import alias (@/*)? Yes
What import alias would you like configured? ./*

Once installed, we have updated jsconfig.json file as shown below. For more options visit VS Code Studio 

{"compilerOptions": 
    {
      "baseUrl": "."
    }
}

For more detailed Next.js application directories and files structure, visit Next.js site.

Here is how the Geeks Next.js ( page router ) theme organizes its file structure:

    GeeksUI

    The root folder geeksnextjs contains the below project structure of a GeeksUI Next.js application

      components

      All common components

      data

      JSON formatted data files

      helper

      It holds the utility functions

      hooks

      It holds custom hooks

      layouts

      It contains various app layouts

      pages

      It contains all pages based on that page router works

      public

        images

        It contains all the images which are used in the theme

      routes

      All navigations' route structure

      store

      A store holds the whole Redux state tree of your application

      styles

      All SASS files and folders included in it

      sub-components

      It holds all parts of various pages as sub components

      widgets

      It holds various resuiable snippets or components as widgets

      .eslintrc.json

      Configuration file for ESLint

      .gitignore

      Git files and folders to ignore

      app.config.js

      Application configuration which includes theme settings

      jsconfig.json

      Configuration file for JavaScript

      next.config.js

      Configuration file for Next.js

      package.json

      Project dependencies and scripts

Buy Now