What is the difference between a framework and a CLI?
In the world of web development, it is essential to understand the differences between a framework and a CLI. A CLI like Create React App makes it easy for you to do the initial work by configuring the necessary libraries, but a framework like Next.js goes a step further by integrating complete internal tools to further optimize the development process.
Why is Next.js a complete framework?
Next.js is not just a command line tool; it is a framework that uses the power of React for views and adds multiple tools already configured to enhance the development experience. Unlike Create React App, which sets up initial projects, Next.js integrates advanced functionality such as routing and server-side rendering, making it easy to develop complete applications without the need to import multiple external libraries.
How do I structure an application with Next.js?
Next.js uniquely structures your applications through the pages
folder. Here, each file automatically becomes a path for your application. For example:
- An
index.js
file in pages
will represent the path /
.
- A
about.js
file in pages
will represent the /about
path.
In addition, you can create subfolders to better organize them and generate nested paths.
import Link from 'next/link';
const HomePage = () => ( <div> <p>This is a site to buy tickets for your favorite movies.</p> <Link href="/movies"> <a>Go buy movies</a> </Link> </div>);
export default HomePage;
How does client-side routing work in Next.js?
In Next.js, the Link
component takes care of routing without reloading the page, improving the speed and efficiency of applications. When the page is first loaded, server-side rendering is used, but once loaded, it is transformed into client-side routing, thus speeding up the user experience:
import Link from 'next/link';
const MoviePage = () => ( <div> <h2>Movies</h2> <Link href="/pay"> <a>Pay</a> </Link> </div>);
export default MoviePage;
How do I extend my application with new pages?
To demonstrate the power of Next.js, let's add new routes to our application, such as one to display invoices for purchased tickets:
- Delete or rename existing files as needed.
- Create new files for each new desired page.
import React from 'react';
const MoviesPage = () => { const movies = ['Avengers', 'Terminator']; return ( <div> <h2>Movies</h2> {/**/} {movies.map((movie, index) => ( <divkey={index}> <p>{movie}</p> </div> ))} </div> );};};
export default MoviesPage;
How to use dynamic information in Next.js?
To display dynamic information according to the number and type of tickets, Next.js uses useRouter
to access the query
URLs, allowing to customize the content display according to the provided data.
import { useRouter } from 'next/router';
const PaymentPage = () => { const router = useRouter(); const { query } = router;
return ( <div> <p>You bought {query.quantity} movie tickets {query.name}.</p> <Link href="/movies"> <a>Back to us</a> </Link> </div> );}; };
export default PaymentPage;
This approach allows developers to create more personalized and dynamic experiences, adapting to user actions throughout the application.
These are the key fundamentals for working with Next.js, from basic structure to implementing dynamic routes. It is designed to make React application development faster and more efficient, and encourages you to also explore its counterpart in the Vue ecosystem, Nuxt.js.
Want to see more contributions, questions and answers from the community?