DEV Community

Cover image for Let’s build and deploy a Full Stack Next.js App: Part 1
Musole Masu
Musole Masu

Posted on • Updated on

Let’s build and deploy a Full Stack Next.js App: Part 1

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
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode
  • Free from npm warnings, you can now install Next.js, run:
$ npm install next
Enter fullscreen mode Exit fullscreen mode
  • 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"
 },
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode
  • 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
Enter fullscreen mode Exit fullscreen mode

The result

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
Enter fullscreen mode Exit fullscreen mode
  • Next, generate “tailwind.config.js” and “postcss.config.js” files with this command in the project directory:
$ npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode
  • 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: [],
};
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode

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
After
After tailwindcss

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;
Enter fullscreen mode Exit fullscreen mode
  • And drop this in “MealList.js”:
import MealItem from "./MealItem";
const MealList = () => {
  return (
    <div className="flex flex-wrap">
      <MealItem />
    </div>
  );
};
export default MealList;
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode
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;
Enter fullscreen mode Exit fullscreen mode

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 for updates.

Find the completed project here.

À bientôt Happy

Discussion (1)

Collapse
mumbere7 profile image
Mumbere Arnold

Great start can’t wait for part 2…