Next.js 15 Tutorial - 3 - Project Structure – Transcript

00:00previously we learned how to create and run a basic nxs application now we're going to dig into the Project's structure to understand what makes everything take when we run our application I've got the hello world project open in vs code and at the root level we can see four folders and 10 files let's break this down one by one starting with the files first we have package.json this is where all our

00:26project dependencies and scripts live for dependen es we've got the essentials next sh version 15 react and react Dom version 19 depending on what you choose during setup you might also have typescript with its types Tailwind with post CSS and eslin packages the script section is pretty straightforward Dev for development mode build for production builds start for

00:53running the production server and Link for setting up NEX jss built-in es link configuration a straightforward package.json file with dependencies and scripts next up are our configuration files we've got next. config dots for next year settings Ts config.js for typescript eslint config.js for eslint and both Tailwind doc

01:21config.cfg MGS for tailn CSS there are also a few files we won't focus on much in this course pack package lock. Json which ensures consistent installation of our dependencies get ignore for Version Control the readme file which contains a few instructions related to running building and deploying the application and next env. D.S which contains the typescript Declarations for

01:48NS now let's proceed to the different folders first is the nextext folder this gets created when you run either Dev or Bild scripts it's where your Nexus application actually gets served from you will notice that this folder is get ignored so don't worry about this one too much during development then we have node modules the home of all our installed dependencies this gets created when you run npm install or in our case

02:16when we run the dev script which handles the installation automatically if needed like the next folder this wants get ignored to and we don't need to worry about it during development the third folder is the public folder it's pretty pardon it's where all your static assets like images and svgs go finally we've got the start of the show The Source folder inside source there is the app

02:41folder which is the app router this is where we will spend most of our time in this course currently it contains four files F icon for the browser tab icon global. CSS for application wide Styles layout. TSX for shared UI elements across pages and page. TSX which creates what you see at localhost for 3000 this page. TSX is what we tweaked earlier the

03:08home component defined here slots into layout. TSX as children prop to create the complete UI in layout. TSX depending on the minor version of nexs you might see Guist font imported as a Google font or might also be referenced as a local font that does not affect our learnings so don't worry too much about it but let me explain how it all comes together when we run the command npm run Dev in

03:35the terminal the execution starts from package.json moves to layout. TSX rendering the root layout component for the URL localhost 3000 it looks for the component in page. TSX within the app folder that is our home component it renders this component inside the root layout you might now be wondering how this app folder handles routing in our application but before we get there we

04:03need to cover some new react Concepts that are fundamental to how we write next year's code let's explore those next supporting the channel is free please like And subscribe it helps a lot