This is a simple Next.js project that demonstrates the basic features of Next.js, including routing, server-side rendering, and API usage.
pages: This directory contains all the pages of the application. Each file corresponds to a route based on its name.- components: This directory contains reusable React components.
public: This directory contains static files like images.- styles: This directory contains global CSS styles.
pages/index.js: The home page of the application. It fetches movie data from an API and displays it.pages/about.js: A simple about page.pages/404.js: A custom 404 error page.pages/movies/[...params].js: A dynamic route that displays details for a specific movie.components/NavBar.js: A navigation bar component.components/Seo.js: A component for setting the page title using Next.js's Head component.components/Layout.js: A layout component that wraps all pages and includes the navigation bar.
- Clone the repository.
- Install the dependencies using
npm install. - Start the development server using
npm run dev.
- dev: Starts the development server.
- build: Builds the application for production.
- start: Starts a production server.
- lint: Runs ESLint on the project.
- API_KEY: Used to authenticate requests to the movie API.
- react: A JavaScript library for building user interfaces.
- react-dom: React package for working with the DOM.
- next: A framework for building React applications with server-side rendering.
- eslint: A tool for identifying and reporting on patterns in JavaScript.
- eslint-config-next: ESLint configuration for Next.js projects.
This project uses the latest JavaScript standards and follows the Conventional Commits specification for commit messages.