# 1.2-a-tour-of-the-folders-and-files

Let's walk through the folders and files in your next app. We don't need to be expert at manipulating them all right now, and there may well be a bunch of things you NEVER touch. So we'll focus on the key elements that you may want to play around with as you learn.

- let's start by finding the file that contains the code for the homepage (i.e. what you see when you go to [localhost:3000](http://localhost:3000/)). If you chose to use the `src` folder, you'll find the code for your pages in `/src/pages`, and the homepage is created by the `index.js` file.
- if you want, go ahead and change some lines of this code to see if you can make intentional changes to the homepage.
- but ultimately we are going to delete every single line in this file and leave only a very simple react component:

    export default function Home () {
      return (
        <div>
          <h1>my next app</h1>
        </div>
      )
    }

- if you are completely new to react, you may want to zip through [this basic tutorial on the React site](https://reactjs.org/docs/introducing-jsx.html), but, basically a React component a reusable piece of code that describes a part of the user interface of an application. In NextJS, files created in the `/src/pages` folder that export a React component will create a webpage on your site.
- other than the `_app.js` and `_document.js` files, that is. They're special.
- `_app.js` is what starts your app, and it will inject anything (styles, elements, etc) that you'd like to persist across the entire site. We're going to keep it pretty minimal.
- `_document.js` is going to matter more when using some of the newer Next 13 stuff that we're going ignore here, so we're actually going the **DELETE** this file. Go ahead and delete it, then reload [localhost:3000](http://localhost:3000) to confirm that it still works (it should!)
- you'll note that `_app.js` references `@/styles/globals.css` to define global styles for your app. Since we're trying to do most things from scratch (to make sure we understand everything we're seeing in our browser) let's go ahead and delete everything we see in that file. Hop over into `/styles/globals.css` and delete absolutely everything. When you reload your homepage it should look like the web circa 1995 again.
- in the styles folder you'll also see `Home.module.css`. This is the file that WAS determining the styles on `index.js` before we deleted the code in that file and started over again. Let's delete all of the css code from `Home.module.css` to start all over again. We'll hold off on reconnecting it to our homepage for now though.

## ask chatGPT until we can add notes on these

- what is `package.json` in a node app?
- what does the `next.config.js` file do in a next app?
- what does `jsconfig.json` do?
-