正文

打造个性Next.js 404页面：自定义设计，提升用户体验

/0 浏览量
0321

在构建网站时，404页面往往被忽视，但一个精心设计的404页面不仅能给用户带来更好的体验，还能体现品牌的个性化和专业性。本文将详细介绍如何在Next.js中打造一个个性鲜明的404页面。

1. 准备工作

在开始之前，请确保你已经安装了Next.js，并且了解基本的使用方法。

2. 创建404页面

首先，在项目的pages目录下创建一个名为404.js的文件。

// pages/404.js

import React from 'react';

const NotFoundPage = () => {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>抱歉，您所访问的页面不存在。</p>
      <a href="/">返回首页</a>
    </div>
  );
};

export default NotFoundPage;

这段代码创建了一个简单的404页面，包含标题、描述和返回首页的链接。

3. 自定义样式

为了让404页面更加个性，我们可以通过CSS进行美化。

/* styles/404.module.css */

.notFoundPage {
  text-align: center;
  padding: 50px;
}

h1 {
  font-size: 24px;
  color: #333;
}

p {
  font-size: 16px;
  color: #666;
}

a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 20px;
}

然后，在404.js文件中引入这个CSS样式。

// pages/404.js

import React from 'react';
import styles from '../styles/404.module.css';

const NotFoundPage = () => {
  return (
    <div className={styles.notFoundPage}>
      <h1>404 - Page Not Found</h1>
      <p>抱歉，您所访问的页面不存在。</p>
      <a href="/">返回首页</a>
    </div>
  );
};

export default NotFoundPage;

4. 添加动画效果

为了让404页面更加生动，我们可以添加一些动画效果。

/* styles/404.module.css */

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.notFoundPage {
  /* ... */
}

h1 {
  /* ... */
}

p {
  /* ... */
}

a {
  /* ... */
}

.rotate {
  animation: rotate 2s linear infinite;
}

在404.js文件中添加一个旋转的类名。

// pages/404.js

// ... (其他代码)

const NotFoundPage = () => {
  return (
    <div className={`${styles.notFoundPage} ${styles.rotate}`}>
      <h1>404 - Page Not Found</h1>
      <p>抱歉，您所访问的页面不存在。</p>
      <a href="/">返回首页</a>
    </div>
  );
};

export default NotFoundPage;

5. 集成搜索引擎

为了让用户在404页面时也能快速找到所需内容，我们可以集成搜索引擎。

// pages/404.js

// ... (其他代码)

const NotFoundPage = () => {
  return (
    <div className={`${styles.notFoundPage} ${styles.rotate}`}>
      <h1>404 - Page Not Found</h1>
      <p>抱歉，您所访问的页面不存在。</p>
      <a href="/">返回首页</a>
      <input type="text" placeholder="搜索内容" />
      <button>搜索</button>
    </div>
  );
};

export default NotFoundPage;

6. 总结

通过以上步骤，我们已经成功打造了一个个性鲜明的Next.js 404页面。在后续的开发过程中，可以根据实际需求不断优化和美化，为用户提供更好的使用体验。

-- 展开阅读全文 --