Setting up a project is a piece of cake. Open a terminal (check out Warp) and place yourself the directory where all your other projects live (for me, that is ~/Projects). Then follow the Automatic Installation instructions on the Next.js site to scaffold the project. You will be answering a few questions, do not overthink; you can safely accept the defaults.
Open the project in your favorite code editor (tip for Mac users: Zed). You can skim through the project structure documentation over at Next.js, but we will go over the fundamentals here. The generated project should now have the following structure:
- app
- node_modules
- public
- .eslintrc.json
- .gitignore
- jsconfig.json
- next.config.mjs
- package-lock.json
- package.json
- postcss.config.js
- README.md
- tailwind.config.js
The generation tool has created a git repository for your code to live in and an npm project with a package.json file filled with the projects dependencies and a few useful scripts. Go ahead and start the development server from a terminal: npm run dev, and browse to http://localhost:3000 to view the generated project in action.
The app directory is central to Next in that it defines the different routes and pages of the application. Next uses a file structure approach to routing. For example the app/page.js file represents the root page, or home page, of the application. To create a route to a subpage you add a subfolder to the app/ folder populated with a page.js file. You may test this by creating the file app/test/page.js who's default export is the component that will be rendered for the route:
Now you can navigate to http://localhost:3000/test to see the result.
The subfolders in the app/ directory will generally be referred to as "routes".
You are now basically ready to continue your journey on this site. Do what you prefer with the root page, keep it as is, or make a Table of Contents of it, or showcase all your creations on it. To keep things neet and tidy you may want to remove the app/test/ directory. You might also want to create a components folder in the root of your project where components will live. And as you will notice, I prefer a file naming scheme where files that contain JSX code will have the extension .jsx, and JavaScript files will have a .js extension. That would make your starting-point project have the following structure:
- app
- components
- node_modules
- public
- .eslintrc.json
- .gitignore
- jsconfig.json
- next.config.mjs
- package-lock.json
- package.json
- postcss.config.js
- README.md
- tailwind.config.js
That is all for now. Enjoy your journey!