Sitecore JSS Next.js folder structure brief introduction

I am going to explain the the JSS Next.js Folder Structure in high level.

JSS Next.js Folder Structure

.NEXT- It is folder where build & published files are stored.

PUBLIC- We can keep public access files like image, files, documents or media assets.

SCRIPTS- It contains JSS Defaults scripts to create JSS projects and handles some prebuild functionality.

Sitecore- It contains the app definition config(where we define app site definition) and deployment secret config.

SRC- It is place where we create Components, Styles, Pages, API and other JSS supporting files. etc. We can say development folder.

.Env & .Env.Local - It is file where we define the app configurations like PUBLIC URL, JSS_EDITING_SECRET, SITECORE_API_KEY, SITECORE_API_HOST, JSS_APP_NAME .

NEXT.CONFIG.JS -? It is file where we write or define next.js configs like multilingual, rewrite modules or any plugin configs.

PACKAGE.JSON -? It is file where all the library dependencies listed.

SCJSSCONFIG.JSON - It is automatically create when we run the jss deploy config command, it contains instance path, apikey, deploysecret, deployrul, layoutservicehost.

TSCONFIG.JSON & next-env.d.ts & tsconfig.scripts.json - These files help typescript to work with JSS next.js project.

FOLDER STRUCTURE INSIDE SRC

lets try to understand the SRC folder in high level.

JSS Next.js follow the page route file based routing system and dynamic routing system. and Sitecore CMS is folder based page item structure.

ASSETS - We create styling files like CSS, SCSS files or CSS file module.

COMPONENTS - We create components for JSS application here.

_APP.TSX- Entry point for application, anything we define , take effect on application level like CS module or CSS file.

[[...PATH]].TSX - It is dynamic route, we call the optional catch-all route passes the path(routes) information to next.js components.

404.TSX- Its is 404 error page, when no route is found it redirect to 404 file.

COMPONENTBUIDLER.TS - It is file responsible for adding and mapping components(JSS & CMS) dynamically. It usually maps the jss components with the Sitecore renderings.

PAGE-PROPS_FACTORY_PLUGINGS.TS - Page Props Factory get the path/route information from dynamic optional catch-all route and makes a request to the Sitecore Layout Service REST API or Sitecore GraphQL Edge schema to fetch layout data for the item or component.

For more you get the course content from here link: https://techonlinelearning.com/courses/jss-xm-cloud-developer-introduction-course/

For JSS & XM Cloud interview questions link: https://techonlinelearning.com/courses/jss-xm-cloud-interview-question/

If you want to enroll for training session link: https://sitecoredevservices.com/sitecore-training-online-2/

For Corporate Training Program link: https://sitecoredevservices.com/corporate-sitecore-cms-training-program/

Other Sitecore CMS and JSS Articles link: https://sitecoredevservices.com/blogs/

You can find my blogs articles link: https://www.mypiblogs.com/

#jss #xmcloud #jssproject #nextjs #jssnextjs #sitecore #sitecoredeveloper #jssxmcloudintroductioncourse #headless #headlesscms #headlesssxa #headleservice