Since its introduction, Next.js has continued to evolve, offering advanced features that simplify development, improve performance and optimize SEO.
Why Next.js?
Next.js extends React by introducing server-side page generation (SSR), static site generation (SSG), automatic page optimization and many other features that improve the development experience and effectiveness of the final application. This makes Next.js ideal for projects that require advanced SEO, fast page loading and simplified routing management.
Create a New Next.js Project
Use the following command to create a new Next.js project. This command creates a new directory with a preconfigured Next.js project.
- npx create-next-app@latest my-project-name
- cd my-project-name
- npm run dev
Project Structure
Explore the generated project structure. You will find important directories like pages, where each file corresponds to an application route, and public, for static resources like images.
Creating Pages with Next.js
Next.js uses a file-based routing system in the "pages" directory. Creating a new page is as simple as adding a new JavaScript or TypeScript file inside this directory.
// pages/about.js
export const About = () => {
return <div>Welcome to the About page!</div>;
}
export default About;Visit "http://localhost:3000/about" to see your new page in action.
SSR and SSG with Next.js
One of the distinctive features of Next.js is its ability to pre-render pages through both Server-Side Rendering (SSR) and Static Site Generation (SSG).
SSR: Use getServerSideProps to fetch data at request time.
// pages/post/[...slug]/index.js
export const getServerSideProps = async ({ params }: Context) => {
const { slug } = params;
const res = await fetch(`https://api.theartcode.dev/post/${slug}`);
const post = await res.json();
return { props: { post } };
}
export const Post = ({ post }) => {
return <div>{post.title}</div>;
}
export default Post;SSG: Use getStaticProps and getStaticPaths to generate static pages at build time.
// pages/post/[...slug]/index.js
export const getStaticPaths = async () => {
const res = await fetch('https://api.theartcode.dev/posts');
const posts = await res.json();
const paths = posts.map((post) => ({
params: { id: post.id.toString() },
}));
return { paths, fallback: false };
}
export const getStaticProps = async ({ params }) => {
const { slug } = params;
const res = await fetch(`https://api.theartcode.dev/post/${slug}`);
const post = await res.json();
return { props: { post } };
}
Optimization and SEO
Next.js offers several built-in features to optimize your site for search engines (SEO). One of these is the use of the component to modify the page title and add specific meta tags, which are crucial for SEO.
Using "Head", you can customize the page title, description, meta tags for social media sharing and more, directly within your Next.js page components. This will allow you to have detailed control over the information that search engines and social sharing platforms will collect from your site, improving visibility and relevance in search results.
import { Head } from 'next/document';
export const Home = () => {
return (
<>
<Head>
<title>The artCode - Code Test</title>
<meta name="description" content="Where art meets code..." />
<meta property="og:title" content="The artCode - Where art meets code" />
<meta property="og:description" content="Welcome to the artCode. Here you will find information about..." />
<meta property="og:image" content="https://theartcode.dev/shared-image.jpg" />
<meta property="og:url" content="https://theartcode.dev" />
<link rel="icon" href="/favicon.ico" />
</Head>
/// Next scripts
</>
);
};
export default Home;