Let’s build and deploy a Full Stack Next.js App: Part 1
Tags: nextjs, tailwindcss, mongodb, webdev
Published: 2021-10-25 10:31:46

**Next.js** is referred to as the React framework for production, which comes with more features than simple React as a library. It gives us rules and guidelines on how we should structure our projects and it improves React developers' life, with built-in features like file-system based routing or “head” metadata for SEO.

In this article, we will build a simple food app that displays menu. It will be styled with **Tailwind Css** in the first part,  and in the coming parts, we will connect the app  to a **MongoDB** database and deploy it on **Vercel**. 

##Prerequisites
For the tutorial to go well, you must have basic knowledge of **Node js** and **React** and have either a **GitHub / Bitbucket / Gitlab** account. You need also to have at least Node js 14.18.1 LTS and **Git** installed on your computers.

##1. Let's start a new project
All the prerequisites are met, open your terminal and create a new project;
- Run the three commands below, to create a new project directory and set up a new "package.json" file :
```
$ mkdir next-food-app
$ cd next-food-app
$ npm init -y
```
- Next step, in the project directory, install react and react-dom as dependencies, Next.js requires them as peer dependencies:
```
$ npm install react react-dom
``` 
- Free from npm warnings, you can now install Next.js, run:
```
$ npm install next
```
- Open the "package.json" file, in the scripts section, replace the actual code by the one below :
```
 "scripts": {
   "dev": "next",
   "build": "next build",
   "start": "next start"
 },
```
- Back to the project directory, create a folder named “/pages” and inside “/pages” create a file named “index.js” : 


> **Note**: `Next.js comes with the file-system based routing feature, which makes all files added to the “/pages” directory available as routes. All files except “index.js”, which the Router automatically routes to the root of the directory.`


> `/pages/index.js`   =>  `/`
> `/pages/meals/index.js`  =>  `/meals`
> `/pages/meals.js`  =>  `/meals`

- Great, in the "/pages/index.js" create the application HomePage with the following code :
```
const HomePage = () => {
  return <h1>Welcome to our Food Next.js App &#x1F60a;</h1>;
};
export default HomePage;
```
- Now, go to your the terminal, in the project directory, run the command below and on your browser open http://localhost:3000 :
```
$ npm run dev
```
![The result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5ahdw2s59zcion0k53u.png)

You will get the same page on your browser if nothing was omitted.

##2. Let's add Tailwind css
- First step here is to install tailwindcss in the project, you will do so by running the following command in the project directory:
```
$ npm install tailwindcss postcss autoprefixer
```
- Next, generate “tailwind.config.js” and “postcss.config.js” files with this command in the project directory:
```
$ npx tailwindcss init -p
```
- Open the “tailwind.config.js” file and replace all code in there by these:
```
module.exports = {
 purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
 darkMode: false, // or 'media' or 'class'
 theme: {
   extend: {},
 },
 variants: {
   extend: {},
 },
 plugins: [],
};
```
- In the project directory, create a folder named "/public", inside "/public", create another folder named "/style" where you will add a file named "global.css" and put the code below in it:
```
@tailwind base;
@tailwind components;
@tailwind utilities;
```
- After, import your style in your Javascript:
To do so, create inside the “/pages” directory, a file named  “_app.js”. 

> **Note**: `In Next.js the file "_app.js" in the "/pages" directory overrides the default “App” component that allows us to add global css to the whole application.`
```
import "../public/style/global.css";
 
const MyApp = ({ Component, pageProps }) => {
 return <Component {...pageProps} />;
};
export default MyApp;
```
Put the code above in your "_app.js" file, run `$ npm run dev` and open your browser on http://localhost:3000 .
If the procedure was followed correctly, you will notice a difference with the text font between the project before and after tailwind css. Just like in the images below;

**Before**
![without tailwind css](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nh0q0pkldz9nlgfktx2.png)
**After**
![After tailwindcss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ztjtr2du8tweb8kgq435.png)

##3. Finally, let’s add React components

> **Note**: `Next.js is built on top on react, therefore react components are part of it.` 


- In the project directory, create a folder named "/components", and add two js files respectively named “MealList.js” and “MealItem.js”.
- Drop the code below in “MealItem.js”:
```
const MealItem = () => {
  return (
    <div className="w-1/4 p-8 shadow-lg rounded-lg bg-yellow-50">
      <img src="/img/meal1.PNG" className="w-auto h-auto" alt="Chicken Salad" />
      <div className="text-center py-2">
        <h3 className="text-xl font-normal">
          Chicken Salad
          <span className="px-3 font-light text-yellow-500">(4 dishes)</span>
        </h3>
        <p className="text-gray-500 text-base">Herico de Porto</p>
        <button className="bg-yellow-500 px-4 py-2 rounded-lg text-gray-50 font-medium mt-2">
          Details
        </button>
      </div>
    </div>
  );
};
export default MealItem;
```
- And drop this in “MealList.js”:
```
import MealItem from "./MealItem";
const MealList = () => {
  return (
    <div className="flex flex-wrap">
      <MealItem />
    </div>
  );
};
export default MealList;
```
- Import your react components in the Homepage “/pages/index.js” :
Delete all code in there and put the code below:
```
import MealList from "../components/MealList";
const HomePage = () => {
  return <MealList />;
};
export default HomePage;
```
- Download the image found on this link -> https://github.com/musole-masu/nextjs-food-app/blob/main/public/img/meal1.PNG

- Create in the "/public" directory a folder named "/img" and put the downloaded image in there.

- Now, wrap your pages with the style added in the "_app.js" just like it's done below:
```
import "../public/style/global.css";

const MyApp = ({ Component, pageProps }) => {
  return (
    <div className="max-w-7xl mx-auto py-40">
      <Component {...pageProps} />
    </div>
  );
};
export default MyApp;
```
- In your terminal, in the project directory, run `$ npm run dev`, then go to http://localhost:300
![Homepage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7uvvlby7txcg95uvvg0.png)

If you have this exact page on the browser, it means that you have completed each step of this tutorial correctly. Congrats :)

##4. Conclusion
The **Part 1** of our tutorial ends here. To summarize, it was focused on the project creation,  with the installation of dependencies and also focused on styling.
**Part 2** will be published very soon, so stay tuned and follow me on [Twitter](https://twitter.com/MusoleMasu) for updates.

Find the completed project [here](https://github.com/musole-masu/next-food-app).

À bientôt ![Happy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4om0ld63gzpv1xcy3mqi.png)